html5学习-本地存储

Web应用相对桌面应用有着极大的优势，但同时也存在很多的弊端，比如桌面应用可以通过xml或者其他的文件，亦或是内嵌小心数据库来保存数据，在这一点上，web应用也是有着自己的方法，但是还是显得有些捉襟见肘。目前比较常见的本地存储技术有：

1. cookies 

　　这个是用的比较广泛的。支持所有浏览器，各大网站基本都有在用，这是它的优点，但它缺点也较为明显。

　　　　支持的数据大小仅4kb，一般只能用来保存用户的一些登录状态，浏览过的商品，购物车商品等比较简单的信息；

　　　　明文存储，不能用于存放一些比较私密的信息；

　　　　每次请求服务器都会被包含在包头里发送给服务器，加大了流量；

2. userData

　　IE专属。支持的数据大小为64k，由于只支持IE，注定成不了气候。

3. Flash cookies

　　又名：Local Shared Object。支持的数据大小为100k。存储的数据为二进制文件，不过变量名具有可读性。但使用它有个前提条件就是必须安装Flash插件，插件注定不是最优的解决办法。

4. Google Gears

　　google提供的一个浏览器插件，提供了一个API来嵌入一个SQLite的数据库。支持的数据大小无限制，不过原因同上，因插件的原因无法得到广泛应用，支持的浏览器也不够全面，更为重要的是，连google自己都已经移情别恋了。

5. HTML5 Web Storage

　　一种更为全面的本地存储技术，伴随着HTML5诞生。Web Storage可分为local storage和session storage。local storage提供了5MB的存储空间，而sessiong storage甚至没有限制。目前支持的浏览器的有：IE8+，FF3+，Opera10+，Chrome4+，Safari4+，除了一些低版本浏览器，几乎可以傲视群雄！

　　每个浏览器上的每个web应用都有自己的一个LocalStorage，大小限制为5MB，并能在所有的这个浏览器上的窗口和标签页间共享。例如，假设你 在Chrome上运行MyWebApp，如果你在多个标签页和窗口上运行MyWebApp，它们共享相同的大小限制为5MB的LocalStorage数 据。如果你在其他浏览器打开相同的应用，例如Firefox，那么这个新的浏览器将会有它自己的LocalStorage供它上面的窗口和标签页进行共享。LocalStorage只能存储键值对字符串类型的数据，如果你想保存其他类型的数据，你只能在保存的时候把数据转化为字符串，然后在读取的时候再转化回去。

　　提供的API也极为简单。

　　http://www.w3.org/TR/webstorage/

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

基本使用方法为：

//设置值的三种方法
localstorage.k1 = v1;
localstorage["k2"] = v2;
localstorage.setItem("k3","k3");

//取值的三种方法
var k1 = localstorage.k1 = v1;
var k2 = localstorage["k2"] = v2;
var k3 = localstorage.getItem("k3");

//删除值的方法
delete localstorage.k1;
localstorage.removeItem("k2");

//清除所有的数据
localstorage.clear();