sessionStorage 、localStorage 和 cookie
localStorage 和 sessionStorage
HTML5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage； 两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信
- sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 ,关掉浏览器即被清除
- localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
1. 保存数据到本地
sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON
2. 从本地存储获取数据
var value=sessionStorage.getItem("key");//value即为所存的值 var value=localStorage.getItem("key");//value即为所存的值
3. 本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');
4. 删除所有保存的数据
sessionStorage.clear(); localStorage.clear();
5. 监听本地存储的变化
Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage
6. 提供了key方法用于遍历
function showStorage(){
for(var i=0;i<localStorage.length;i++){
//key(i)获得相应的键，再用getItem()方法获得对应的值
console.log(localStorage.key(i),
localStorage.getItem(
localStorage.key(i)));
}
}
一、sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：
1.存储位置不同：
cookie: 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；同时还可以限制cookie只属于某个路径下。
sessionStorage、localStorage：不会自动把数据发给服务器，仅在本地保存。
2.存储大小不同：
cookie：只适合保存很小的数据(因为每次http请求都会携带cookie)，如会话标识。
sessionStorage和localStorage： 虽然也有存储大小的限制，但比cookie大得多。
3.数据有效期不同:
sessionStorage：仅在当前浏览器窗口关闭前有效；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie: 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同:
sessionStorage : 不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage: 在所有同源窗口中都是共享的；
cookie: 在所有同源窗口中都是共享的。
二、cookie和session的区别：
1、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息
2、session中保存的是对象，cookie中保存的是字符串
3、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到
而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的
* sessionStorage 、localStorage 、session、cookie *
简言之：
localStorage: 浏览器端持久化存储, 关闭浏览还存在, 最大5MB(基本没限制了)
sessionStorage: 浏览器端内存存储, 关闭浏览器不存在
session: 服务器端创建, 服务器端保存, 依赖于cookie
cookie: 服务器端创建, 浏览器端保存, 请求携带对应cookie, 长度和数量有限制(4kb)