Html5 系列之：本地存储Storage

简介：

WebStorage提供了更强大的客户端存储功能，这样我们可以离线下载网页，存储更重量级的数据到客户端，减少服务器传输等，这些都是可以替代cookie的理由。Web Storage实际上由两部分组成：sessionStorage与localStorage。sessionStorage用于存储一个会话中的数据，随着网页的关闭数据也会销毁；localStorage用于长久的保存数据，除非手动删除，否则不会过期。

浏览器支持情况：

优点：

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

localStorage的用法

localStorage. length:返回现在已经存储的变量数目。localStorage. key(n):返回第n个变量的键值(key)。localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。localStorage.removeItem(k):删除键值为k的变量。localStorage.clear():清空所有变量。

localStorage.setItem("key1","value111");

localStorage.key2= "values22";

localStorage.getItem("key1");

localStorage.clear();

localStorage的实例