sessionStorage和localStorage的区别

自从HTML 5 标准出现之后，本地化存储一度成为热搜的关键词。在HTML 5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。
下面，关于WebStorage及其两种形式作具体的描述和讲解。

1、web Storage

web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

setItem (key, value) ——  保存数据，以键值对的方式储存信息。
    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。
    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。
    clear () ——  删除所有的数据
    key (index) —— 获取某个索引的key
2、localStorage（永久性-----需要主动删除数据）

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

var foo = 'bar';
var storage = null;  
    if(window.localStorage){              //判断浏览器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
       storage.removeItem("name");     //调用removeItem方法，移除数据  
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null 
    }

localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

3、sessionStorage（生命周期–关闭浏览器之前）

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

sessionStorage的生命周期是存在于标签页或窗口，用于本地存储一个会话
 （ session）中的数据，这些数据随着窗口或标签页的关闭而被清空。因此其仅仅是       
 会话级别的本地存储。
4、web storage和cookie的区别：

web storage的概念和cookie类似，区别就是他是为了更大容量的存储而设计的。Cookie的大小是受限的，并且你每请求一个新页面时cookie都会被发送过去，无形中浪费了带宽，另外cookie还需指定作用域，不可以跨域调用。

除此之外，web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而