localStorage、sessionStorage用法总结

1.做用

1.1 共同点：

        都是用来存储客户端临时信息的对象。

      均只能存储 字符串类型的对象（虽然规范中能够存储其余原生类型的对象，可是目前为止没有浏览器对其进行实现）。

1.2 不同点：    

       localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，不然这些信息将永远存在。

        sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么全部经过sessionStorage存储的数据也就被清空了。

        不一样浏览器没法共享localStorage或sessionStorage中的信息。相同浏览器的不一样页面间能够共享相同的 localStorage（页面属于相同域名和端口），可是不一样页面或标签页间没法共享sessionStorage的信息。这里须要注意的是，页面及标 签页仅指顶级窗口，若是一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是能够共享sessionStorage的。

同源的判断规则：

http://www.test.com

https://www.test.com （不一样源，由于协议不一样）

http://my.test.com（不一样源，由于主机名不一样）

http://www.test.com:8080（不一样源，由于端口不一样）

2.浏览器支持

支持浏览器也至关普遍！几乎支持 html5的都支持。包括移动……下图不完整（WPX也是支持的）

判断浏览器是否支持

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      

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

3.API使用

3.1 原生API

localStorage和sessionStorage使用时使用相同的API：

localStorage. setItem("key","value");//以“key”为名称存储一个值“value”

localStorage. getItem("key");//获取名称为“key”的值

枚举localStorage的方法：

for(var i=0;i<localStorage. length;i++){

     var name = localStorage. key(i);

     var value = localStorage.getItem(name);

}

删除localStorage中存储信息的方法：

localStorage. removeItem("key");//删除名称为“key”的信息。

localStorage. clear();//清空localStorage中全部信息

经过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。

例如：

localStorage.key = {value1:"value1"};

localStorage.key.value1='a';

这里是没法对实际存储的值产生做用的，下面的写法也不能够：

localStorage.getItem("key").value1="a";

3.2 针对对象的存和取的方法：  

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

//存对象

localStorage.setItem('testObject', JSON.stringify(testObject));

//取对象

var retrievedObject = localStorage.getItem('testObject');

var  testObject2=   JSON.parse(retrievedObject);

console.log( testObject2. one );//输出：2

参考： http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

3.3 拓展：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种扩展出来的自定义方法.

参考： http://my.oschina.net/jgy/blog/99631

来自为知笔记(Wiz)