web storage详解，web storage和cookie的区别

web storage介绍

web storage和Cookie都是用来在客户端存储数据。
web storage又分为localStrage和sessionStorage

Cookie的弊端

• 每次请求时，cookie都会存放在请求头中。
• 请求被拦截，cookie数据会存在安全隐患。
• cookie的大小被限制在4K。IE8、Firefox、opera每个域可以保存的50个cookie,Safari/WebKit没有限制。

web storage的特点

优点

• 每个域Chrome，Firefox和Opera是5M，IE是10M。
• 请求中不会携带数据
• 

局限性

• 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
• localStorage在浏览器的隐私模式下面是不可读取的
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• localStorage不能被爬虫抓取到

localStorage

• localStorage存储的数据不会过期，除非用户清空浏览器缓冲。

/*======================
*      存储变量方法      *
=======================*/
localStorage.setItem("name","caibin")；
localStorage.name = "caibin";
localStorage['name'] = "caibin";

/*======================
*      读取变量方法      *
=======================*/
localStorage.getItem("name");
localStorage.name ;
localStorage['name']
localStorage.valueOf(); //读取存储在localStorage上的所有数据
localStorage.key(0);    // 读取第一条数据的变量名(键值)

/*======================
*      删除变量方法      *
=======================*/
localStorage.removeItem("name");
localStorage.clear();   //清空localStorage

/*======================
*        存储JSON       *
=======================*/
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
//存JSON
var d=JSON.stringify(data);
localStorage.setItem("data",d);
//读JSON
json=localStorage.getItem("data");
var jsonObj=JSON.parse(json);

sessionStorage

• 关闭浏览器后数据就会被清空。
  操作方法和localStorage一样。举一个例子，剩下的参考localStorage操作方法

/*======================
*      存储变量方法      *
=======================*/
sessionStorage.setItem("name","caibin")；
sessionStorage.name = "caibin";
sessionStorage['name'] = "caibin";