Web Storage

　　在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端保存诸如用户名等简单用户信息，但通过长期使用，人们发现用Cookies储存永久数据存在几个问题：

　　1、大小：Cookies的大小被限制在4kb

　　2、带宽：Cookies是随HTTP事务被一起发送的，因此会浪费一部分发送Cookies时使用的带宽。

　　3、复杂性：要正确操作Cookies是很困难的

　　针对以上问题HTML5重新提供了一个在客户端本地保存数据的功能，他就是Web Storage功能。顾名思义，Web Storage功能就是在web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：

　　1、sessionStorage：将数据保存在session对象中。session是指用户在某个浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

　　2、localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续。

Meta 浏览器存储保存数据读取数据 < 本地保存数据读取数据 <

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
       <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; saveStorage3(id) {
           </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; data</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(id).value;
           </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; time</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; Date().getTime();
           localStorage.setItem(time,data);
           alert(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;数据已经储存！</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
           loadStorage3(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;msg3</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
       }
    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; loadStorage3(id) {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; result</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<table border='1'></span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;for</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; i</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;i</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt;localStorage.length;i</span><span style="background-color: #f5f5f5; color: #000000;"&gt;++</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
        {
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; key</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;localStorage.key(i);
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; value</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;localStorage.getItem(key);
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; date</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; Date();
            date.setTime(key);
            result</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;<tr&gt;<td&gt;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt;value</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;</td&gt;<td&gt;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt;date</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;</td&gt;</tr&gt;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;

        }
        result</span><span style="background-color: #f5f5f5; color: #000000;"&gt;+=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;</table&gt;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; target</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;document.getElementById(id);
        target.innerHTML</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;result;
    }
    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; clearStorage() {
        localStorage.clear();
        alert(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;数据已经<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a></span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        loadStorage(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;msg3</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;p </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="msg3"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;p</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;textarea </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="memo"</span><span style="color: #ff0000;"&gt; cols</span><span style="color: #0000ff;"&gt;="60"</span><span style="color: #ff0000;"&gt; rows</span><span style="color: #0000ff;"&gt;="10"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;textarea</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="saveStorage3('memo')"</span><span style="color: #0000ff;"&gt;></span>追加数据<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="clearStorage()"</span><span style="color: #0000ff;"&gt;></span><a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>数据<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>

</body>
</html>

Web Storage

猜你在找的HTML5相关文章