Web Storage 功能，顾名思义，就是在web上针对客户端本地存储数据的功能，具体来说Web Storage 分为两种：

sessionStorage:

    将数据保存在session对象中，所谓session是指用户在浏览某个网站中，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage:

    将数据保存在客户端本地的硬件设备（通常指硬盘，当然可以是其他的硬盘设备）中，即是浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时，仍然可以继续使用。

sessionStorage与localStorage区别:

    这两者的区别在于sessionStorage为临时保存，而localStorage为永久保存。

对比session和cookie的区别主要体现在一下三点：

    1.容量大，IE8里面是10M, 不同的浏览器支持的大小不一致。

    2. 不会随着会话来传输。

    3. 读取和写入方便，有现成的api

    不管是sessionStorage, 还是localStorage, 可使用的API都相同，常用的有如下几个方法：

    1.保存数据： localStorage.setIterm(key,value);     sessionStorage.setItem(key, value);

    2.读取数据： localStorage.getIterm(key);              sessionStorage.getItem(key);

    3.删除单个数据： localStorage.removeItem(key)   sessionStorage.removeItem(key);

    4.删除所有数据： localStorage.clear();                    sessionStorage.clear();

两个都有属性length 表示Key的个数，也即key长度：

    var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;

如上，key和value都必须为字符串，换言之，Web Storage的API只能操作字符串。

Web storage 的浏览器支持情况的判断：

    在使用web storage时，首先判断是否支持该功能，有些浏览器不支持(IE)，只有支持才可以使用，判断方法如下：

if(window.localStorage){  //或者 window.sessionStorage         alert("浏览支持localStorage")   }else{          alert("浏览暂不支持localStorage")   }     //或者   if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage       alert("浏览暂不支持localStorage")   }

Web Storage使用实例代码：

    
    
     function $(id){ return document.getElementById(id);}function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}function savelocalStorage(id){localStorage.setItem("message",$(id).value);}function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}
     
      
sessionStorage Demo
      
       
       
       
       
       
       
localStorage Demo
       
        
        
        
        
       
      
     
    

参考文章：