本地存储—localStorage（HTML5）

localStorage简介

今夜死活睡不着，决定整理下最近搞得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也是支持的）

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

一：

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

localStorage使用方法

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解决方案（网上搜的）

if(!window.localStorage && /MSIE/.test(navigator.userAgent)){  
    if(!window.UserData) {  
        window.UserData = function(file_name) {  
            if(!file_name) file_name="user_data_default";  
            var dom = document.createElement('input');  
            dom.type = "hidden";  
            dom.addBehavior ("#default#userData");  
            document.body.appendChild(dom);  
            dom.save(file_name);  
            this.file_name = file_name;  
            this.dom = dom;  
            return this;  
        };  
        window.UserData.prototype = {  
            setItem:function(k, v) {  
                this.dom.setAttribute(k,v);  
                this.dom.save(this.file_name);  
            },  
            getItem:function(k){  
                this.dom.load(this.file_name);  
                return this.dom.getAttribute(k);  
            },  
            removeItem:function(k){  
                this.dom.removeAttribute(k);  
                this.dom.save(this.file_name);  
            },  
            clear:function() {  
               this.dom.load(this.file_name);  
               var now = new Date();  
               now = new Date(now.getTime()-1);  
               this.dom.expires = now.toUTCString();  
               this.dom.save(this.file_name);  
            }  
        };  
    }  
    window.localStorage = new window.UserData("local_storage");  
}

PS：不支持原生 localStorage全部方法，只支持4种扩展出来的自定义方法……固然你还能够多多扩展（多多益善嘛！！）

❤犒劳一杯咖啡❤

                                                                                                        做者：Fake Mr