二分之一

一、本地存储概况

目前支持以下方法，实现浏览器端的本地存储：

1、cookie ;

每个cookie的大小不能超过4K。

Cookie数：

• IE7跟IE8限制为50个。
• Firefox限制为50个。
• Opera限制30个
• Safari/Chrome/WebKit没有限制

每次的http请求，cookie都会包含在包头里发送给服务器，cookie在http请求中是明文传递的。

2、flash LSO ;

local shared objects (LSOs).

Flash的LSOs 就如同Web浏览器中的cookies，它们被一些开发者称为“超级cookies”，因为LSOs可以存储大量数据，且存储和读取的都是原生的ActionScript数据类型。LSOs 默认的空间大小100 KB， 用户可以通过Flash Player’s Settings Manager控制LSOs的使用空间大小，来严格限制被使用的空间。

3、userData ；

是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。

单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB，所以如果考虑到各种情况的话，单个文件最好能控制64KB以下。

4、Google Gears（SQlite）;

一个嵌入浏览器的小型数据库插件，使用类似SQL语句进行查询。

以前做数字电视开发时，常常需要用到，有过较深入的使用，但种种不方便还是显而易见。

5、Html5本地存储：localStorage和sessionStorage

大小支持5M，浏览器支持情况如下：

二、window.name

window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

(function(){
    if(window.name=="" || window.name==null){
        window.name=1;
    }else{
        window.name++;
    }
    document.getElementById("name").innerHTML=window.name;
})();

不关掉页面，不断刷新页面，可以发现window.name的值可以不断累加。

三、兼容方案

1、永久存储

使用window.localStorage和userData（IE5.5-8.0）

2、会话临时存储

使用window.sessionStorage和userData

userData的expires属性设置或者获取 userData behavior 保存数据的失效日期，不设置则为永久。

本文使用window.name的会话（当前页不关闭窗口，存储值会一直有效）特性实现sessionStorage的功能。

具体封装代码：store.js

使用方法：

var storeObj = store_constructor(); //注意只需调用运行，不用new，该对象为单例对象

方法列表：

init(); 初始化(必须在dom加载完后进行)。通过判断对HTML5的localStorage支持情况，设置相应变量
setValue(key, value); 设置键值对到本地存储，value可为对象，方法内部会调用JSON.stringify转换字符串
setSessionValue(key, value); 临时保存，关闭浏览器后销毁
getValue(key); 获取值，对应setValue();
getSessionValue(key); 获取临时值，对应setSessionValue();
deleteValue(key); 删除值，对应setValue();
deleteSessionValue(key); 删除临时值，对应setSessionValue();
clearLocalStorage(); 清除所有存储，对应setValue();
clearSessionStorage(); 清除所有临时存储，对应setSessionValue();
clearDOMStorage(); 清除所有存储

Chrome Session Storage存储值：

IE下userData生成的HTML节点：

四、userData(有兴趣了解userData使用，可继续阅读)

1、首选需要创建一个HTML标签以寄存userData的存储数据

在中加入：<meta propdescname=”save” content=”userdata”/>

在中加入：<div id=”userid” style=”display: none; behavior: url(‘#default#userData’);”></div>

2、设置值

document.getElementById("userid").setAttribute("key","value");
document.getElementById("userid").save(_objectName);
//其中参数为存储的对象名，这个名称在后面的取值是需要保持一致，将对象数据存储到一个 userData 存储区。

3、取值

document.getElementById("userid").load(_objectName);//从userData存储区载入存储的对象数据。
document.getElementById("userid").getAttribute("key");

4、清除存储值

document.getElementById("userid").removeAttribute("key");//移除对象的指定属性。
document.getElementById("userid").save(_objectName);

5、销毁

略。

最后修改时间：2014年9月11日星期四晚上10点27