html5中本地存储替代cookie：qext.LocalStorage、例子

背景

先看看各种本地存储的变革：

html' target='_blank'>Cookies：浏览器均支持，容量为4KB

UserData：仅IE支持，容量为64KB

Flash：100KB

Google Gears SQLite ：需要插件支持，容量无限制

LocalStorage：HTML5，容量为5M

现准备在项目中试图取代cookie的实现，基本分析如下：

每次和服务器端进行交互，cookie都会在请求中被携带，cookie过多，也造成带宽的浪费

cookie的容量很小，或许无法满足当今互联网的本地存储需求

在IE8+、Firefox3.0+、Opera10.5+、Chrome4.0+、Safari4.0+、iPhone2.0+、Andrioid2.0+等平台下，已经完全支持HTML5的LocalStorage

在IE7即以下版本中，可以使用UserData来代替cookie，而且同样比cookie保险

用户可能清cookie，但不见得知道去清UserData或者LocalStorage，这也增强了一道代码保险

到底用啥来取代？

UserData：仅IE可用

Flash：存储空间够了，也还挺好，可这玩意儿不是HTML原生的

Google Gears：存储空间没啥限制，就是得装额外的插件

HTML5-LocalStorage：官方建议每个站点可以本地存储5M的内容，非常大了

最后再分析一下现在咱们针对的浏览器：IE系列、FF、Chrome、Safari、Opera，外加双核的遨游、QQ浏览器、搜狗浏览器

其中，现在的FF、Chrome、Safari、Opera已经完全支持HTML5-LocalStorage

双核的那些个浏览器，要么Webkit内核，要么IE内核（大多都是IE8的内核了），所以这些也是支持HTML5-LocalStorage的

最后就剩IE7及其以下版本，对于专门的IE，就用它们自家提供的UserData了，处理很方便

总结：用UserData和HTML5-LocalStorage结合的方式，来取代cookie！

UserData的存储情况：

2011-03-23_201627.png

UserData行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上。

该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。

从上面的表格可以看出，就算是一个受限（Restricted）的站点，单个文档也能存64KB的数据，整个Domain也能装得下640KB的东西。

要了解更多UserData的东西，可以点击这里

关于Expires

我们都知道，采用cookie来进行本地数据缓存，可以设定一个生命周期，在IE中采用UserData进行替代，能完美的实现。

但是对于HTML5提供的LocalStorage则没有提供现成的API，来设置某本地存储的生命周期，只能采取一些极端的手段进行模拟实现。

关于数据的批量存储、提取、删除

一个好用的组件库，应该提供更加便捷的API，原生的cookie、UserData、LocalStorage都没有提供现成的接口可调用，所以，在这里，我们来包装一个，使其拥有这样的批量接口。

代码实现

1、IE中的UserData实现

原理很简单，就是创建一个HTML节点，为其增加一个行为（behavior）：#default#userData，把待存储的数据放到该节点的属性上（setAttribute），再保存到本地即可（save）。

创建html实例：

/**

* 创建并获取这个input:hidden实例

* @return {HTMLInputElement} input:hidden实例

* @private

*/

function _getInstance(){

//把UserData绑定到input:hidden上

var _input = null;

//是的，不要惊讶，这里每次都会创建一个input:hidden并增加到DOM树种

//目的是避免数据被重复写入，提早造成“磁盘空间写满”的Exception

_input = document.createElement("input");

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。