本地存储—localStorage(转)

先简单说下阐述下：localStorage    规范：http://dev.w3.org/html5/webstorage/

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。但是如果你找到浏览器的隐私或者本地存储的数据删除也是一样可以删除的！我找了下Safari浏览器如下图：

存储空间较大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多很多。本地存储不发生服务器，是离线保存在你浏览器本地的！不会与服务器发生任何交互。本地存储数据库在同样域名下的网页间是共享的，即便是在多个浏览器标签页中。我在做产品购物车的时间使用到了，这边选择产品，把产品属性拼接成JSON字符串保存到localStorage中，然后到购物车中去取……

独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。当把当前网页或者浏览器关掉并再进入时，localStorage中的数据还是存在的。那么，这个数据是存在什么地方的呢？查找后发现对于Chrome Browser, 其缺省存在以下地址：C:/Documents and Settings/UserName/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage

支持浏览器也相当广泛！几乎支持html5的都支持。包括移动……下图不完整（WPX也是支持的）

判断浏览器是否支持本地存储：

一：

1 if(window.localStorage){
2  alert('This browser supports localStorage');
3 }else{
4  alert('This browser does NOT support localStorage');
5 }

 

localStorage的用法极其简单！（Map格式（键-值））一共就这么多……

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

用法很多，可以当成是一个对象方式使用……

localStorage.a = 1;      //设置a为"1"
localStorage["a"] = "FakeMr";      //设置a为"FakeMr"，自动覆盖上面的值。

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。（个人比较喜欢：JSON.parse/JSON.stringify结合使用 ）

拓展：IE6/7解决方案（网上搜的）

01 if(!window.localStorage && /MSIE/.test(navigator.userAgent)){
02     if(!window.UserData) {
03         window.UserData = function(file_name) {
04             if(!file_name) file_name="user_data_default";
05             var dom = document.createElement('input');
06             dom.type = "hidden";
07             dom.addBehavior ("#default#userData");
08             document.body.appendChild(dom);
09             dom.save(file_name);
10             this.file_name = file_name;
11             this.dom = dom;
12             return this;
13         };
14         window.UserData.prototype = {
15             setItem:function(k, v) {
16                 this.dom.setAttribute(k,v);
17                 this.dom.save(this.file_name);
18             },
19             getItem:function(k){
20                 this.dom.load(this.file_name);
21                 return this.dom.getAttribute(k);
22             },
23             removeItem:function(k){
24                 this.dom.removeAttribute(k);
25                 this.dom.save(this.file_name);
26             },
27             clear:function() {
28                this.dom.load(this.file_name);
29                var now = new Date();
30                now = new Date(now.getTime()-1);
31                this.dom.expires = now.toUTCString();
32                this.dom.save(this.file_name);
33             }
34         };
35     }
36     window.localStorage = new window.UserData("local_storage");
37 }

PS：不支持原生 localStorage所有方法，只支持4种扩展出来的自定义方法……当然你还可以多多扩展（多多益善嘛！！）