数据存储

数据存储分为web storage 和 cookie

web storage 和 cookie区别   

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

HTML5的Web Storage 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（当用户关闭浏览器窗口后，数据会被删除）

localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换（localStorage只支持string类型的存储）

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage和sessionStorage的用法一样，以localStorage为例：

if(window.localStorage){  
    var storage=window.localStorage;
    storage.setItem("c",3);//存储
    var storageC= storage.getItem("c");//读取
    storage.c=4;//修改
    storage.removeItem("c");//删除c
    storage.clear();//全部删除
}

存储数组/对象的方式：

//存储：
var menuArray = $.parseJSON(results);//menuArray是从服务器第一次取到的数组、对象
var treeArray=JSON.stringify(menuArray);//转换为字符串
localStorage.setItem("menuArray",treeArray);

//获取
var treeArray=localStorage.getItem("menuArray");
var menuArray = $.parseJSON(treeArray);

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储；

web storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage)
}
function handle_storage(){
    ......  
}