html5本地存储localStorage与sessionStorage详解

公司战略层面全面拥抱html5,为响应公司号召，我开始了html5之学习之旅，虽然我是java后台开发。在这里把今天用到的localStorage与sessionStorage记录下来备忘。

localStorage与sessionStorage是html5本地化存储的新特性，概念上类似于以往我们时常使用的cookie,即将用户数据持久化到本地的技术。而localStorage与sessionStorage作为新时代的产物，相比旧时代的cookie有其巨大的优越性。优越性有三:
其一在能存储的数据量，cookie最大能存储4kb的数据，而localStorage与sessionStorage最大能存储5Mb，目前各大浏览器支持的标准都是如此；其二在功能上，cookie只能存储String类型的数据，以往要将用户数据存储在本地，需要将数据拼接成字符串，再存进cookie,取数据的时候同样麻烦，先将整个cookie对象拿到（String对象），再按拼接的规则拆分，再拿需要的数据，存取都很麻烦！localStorage与sessionStorage不仅支持传统的String类型，还可以将json对象存储进去,存取数据都方便不少，json的优越性就不赘述，localStorage与sessionStorage无疑更现代化；其三在语义层面上，localStorage与sessionStorage语法更优雅、简便。


接下来来看如何祭出localStorage:var storage = window.localStorage;如此便可以使用它了。存取String类型示例:

存值：storage.user="李秀才"; 取值：var user=storage［"user"］;

setItem()和getItem()方式存取：storage.setItem("user","李秀才"); storage.getItem("user");

存取json数据示例：var userInfo={user:"151","age":23,"sex":"男","phone":15411111321,"address":"长安城"}; storage.setItem("userInfo",JSON.stringify(userInfo); userInfo = JSON.parse(storage.getItem("userInfo"));
如果是浏览器版本较低，不支持JSON对象，譬如IE6、IE7、IE8，可引入json2.js文件解决。此文件我已上传到我的资源。

清空：用clear()方法。

删除某个元素：用removeItem();方法：

sessionStorage用法和localStorage完全一致，差别只在有效期：

sessionStorage在用户结束会话（即关闭浏览器或退出账户时失效）；localStorage无失效期，用户在清理浏览器缓存的时候会被清除。

项目中应用：

var ipaddress=ip;
var serveport=port;
var serveAddress='http://'+ipaddress+':'+serveport+'/api/user/login.shtml';
      $.ajax({
      url:serveAddress,
       async : true,
       cache : false,
       type:"post",
       dataType:"json",
      data:{"phone":phone,"password":password},
            success:function(json){
               if(json.code==1){
                    var storage = window.localStorage;
                    var user=userKey;
                    storage.setItem(user,JSON.stringify(json.data));
                    $("#r_top").css("display", "none");
                    $("#login_show").css("display", "block");
                    if ($("#loginPanel").css("display") == "block") {
                     $("#loginPanel").css("display", "none");
                   }
               }else if(json.code==0){
                     swal("提示！", json.msg, "error");
               }
            }        
        });
     }

function exit(){
	sessionStorage.clear();
	location.href="header.html";
}