HTML5本地存储localStorage、sessionStorage及IE专属UserData

By：王美建 from：http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处！

　　在客户端存储数据用的最普遍的方式非cookie莫属，随着HTML5的普及，新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手。localStorage和sessionStorage是HTML5的新特性之一，说是新特性，其实微软公司早在IE8上就已经支持localStorage和sessionStorage这两个api了，只不过在IE8、9下测试这两个api时，务必在服务器环境下测试，在本地环境会报错。

　　一、localStorage是什么？

　　localStorage用于持久化的本地存储，除非手动删除数据，否则数据永不过期。

　　二、相比于cookie，localStorage有什么优点？

　　如下表，罗列出了cookie和localStorage的特性

特性	localStorage	cookie
容量大小	5M	4k左右
兼容性	IE8及以上浏览器	基本上所有浏览器都兼容
过期时间	永不过期	可自定义
是否随HTTP发送到服务端	否	是（占用带宽）
作用域	子域名之间相互独立	可通过.setDomain设置主域名共享

　　localStorage的优点很明显，容量大、不会占用带宽，除此之外，localStorage提供了丰富的方法去设置、读取、移除数据。
　　localStorage.setItem(key,value)  // 设置键值对
　　localStorage.getItem(key)  // 通过键值读取对应的值
　　localStorage.removeItem(key)  // 通过键值移除对应的值
　　localStorage.clear()  // 初始化localStorage，清除所有键值对
　　localStorage.key(index) // 通过下标index来获取指定索引的key名

　　sessionStorage跟localStorage长的差不多，那他们之间有什么差别呢？唯一的差别就在于它们保存数据的持久性上面，localStorage保存的数据永不过期，sessionStorage保存的数据在浏览器窗口关闭之后就消失了，不关闭浏览器窗口只刷新页面的话，sessionStorage保存的数据是依然存在的。它们拥有相同的属性和方法。

　　虽然sessionStorage和localStorage这么好用，但是IE6、IE7上面不支持，我们可以通过IE专属的UserData来弥补这个缺陷，UserData是早期IE浏览器用来本地存储数据用的，UserData的数据是以文件的形式保存在磁盘上，UserData需要依附于一个HTML标签来设置、读取、移除数据，并不是所有HTML标签都可以，支持的HTML标签有：

　　A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP。

　　 UserData对数据的大小同样有一定的限制（从MSDN文档翻译过来的，英文水平好的建议看英文文档）：

站点类型	单个文件大小限制（KB）	单个域名的数据大小限制（KB）
本地机	128	1024
局域网	512	10240
受信任的站点	128	1024
互联网	128	1024
受限站点	64	640

　　从表格上面可以看出，要兼容各种情况的话，建议单个UserData文件大小不超过64KB。

　　利用UserData来存储数据比localStorage麻烦一些，但还是很简单，过程分为以下几步：

　　1、创建HTML标签

　　2、给HTML标签添加样式behavior:url(‘#default#userData’)或者js给HTML对象设置.addBehavior ("#default#userData")

　　3 、设置数据过期时间

　　4、载入UserData

　　5、存入数据/读取数据/删除数据

　　6、保存数据到存储区

　　看代码更容易理解（特别注意：以下代码请在body标签内部调用，在head标签内的script里调用提示没有权限，原因未知）：

<script type="text/javascript">
    var UserData = {
        userData: null,
        name: document.location.hostname,

        init: function() {
            if (!this.userData) {
                try {
                    this.userData = document.createElement("INPUT");
                    this.userData.type = "hidden";
                    this.userData.style.display = "none";
                    this.userData.addBehavior("#default#userData");
                    document.body.appendChild(this.userData);
                    var expires = new Date();
                    expires.setDate(expires.getDate() + 365);
                    this.userData.expires = expires.toUTCString();
                } catch (e) {
                    return false;
                }
            }
            return true;
        },

        setItem: function(key, value) {

            if (this.init()) {
                this.userData.load(this.name);
                this.userData.setAttribute(key, value);
                this.userData.save(this.name);
            }
        },

        getItem: function(key) {
            if (this.init()) {
                this.userData.load(this.name);
                return this.userData.getAttribute(key)
            }
        },

        remove: function(key) {
            if (this.init()) {
                this.userData.load(this.name);
                this.userData.removeAttribute(key);
                this.userData.save(this.name);
            }

        }
    };
</script>

　　总结：在IE6、IE7市场份额逐渐下降的情况下，localStorage和sessionStorage将会应用的越来越广泛，cookie除了在某些必要的情况下，完全可以用localStorage替代，当然，不建议在localStorage里面保存敏感数据，因为localStorage可以随时读取修改或删除。

　　参考文档：http://www.css88.com/archives/3717

By：王美建 from：http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处！