在上一篇博客中整理一些cookie sessionStorage localStorage的知识点梳理，学习之后在这篇文章中总结这三者的区别。
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
一、cookie、sessionStorage、localStorage存储、获取、删除等使用方法的区别
（1）cookie
保存cookie值
var dataCookie = '110';
document.cookie = 'token' + '=' + datacookie;
获取指定名称的cookie值
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
var cookieData = getCookie('token'); //cookie赋值给变量
（2）sessionStorage API接口
添加键值对
//法一：setItem(key,value):为指定key值设置一个对应的value值
sessionStorage.setItem('name','gaby');
//法二：sessionStorage.key = value/sessionStorage['key'] = value
sessionStorage.name = 'gaby'
sessionStorage['name'] = 'gaby'
添加数组对象
key和value必须是字符串形式，如果不是字符串会通过toString()方法来转成字符串再存储
存储数组或对象时，应先转换成字符串格式（JSON格式）再存储
//语法：JSON.stringify(obj)
var obj = {
name: 'gaby',
age: 20
}
sessionStorage['person'] = JSON.stringify(obj);
//存进去为字符串格式,如下图
容易错误
var obj = {
name: 'gaby',
age: 20
}
sessionStorage['person'] =(obj)
//不可以这样存储，这样存储的格式是[object Object],如下图
获取对象，先将JSON格式转换为对象
var obj = {
name: 'gaby',
age: 20
}
sessionStorage['person'] = JSON.stringify(obj);
//获取对象
var person = JSON.parse(sessionStorage['person'])
getItem（key）：根据指定的key值获取对应的value值
两种等效value = sessionStorage.key/value = sessionStorage[‘key’]
同样是获取字符串类型，其他类型需要转换
//获取存储到name键上的值
var name = sessionStorage.getItem('name');
//var name = sessionStorage.name
//var name = sessionStorage['name']
removeItem（key）：删除指定的key值对应的value值
localStorage数据删除需要手动删除，没有数据过期的概念
var name = sessionStorage.getItem('name')
sessionStorage.removeItem('name')
name = sessionStorage.getItem('name')//null
clear()：删除所有存储的内容
//清除sessionStorage
sessionStorage.clear();
var len = sessionStorage.length;//length属性能获取键值对数量
key(index)：在指定的数字位置获取该位置的名字
赋值早的键值对应的索引大，赋值晚的键值对应的索引小，key可以遍历sessionStorage 存储的键值
sessionStorage.setItem('name','gaby');
var key = sessionStorage.key(0);
sessionStorage.setItem('age', 20);
key = sessionStorage.key(0);
key = sessionStorage.key(1);
sessionStorage的API以上就是详细的总结，对于localStorage也是类似的用法，以下作一个简单的总结就好
（3）localStorage
添加键值对
window.localStorage.setItem('key','value')
getItem（key）：根据指定的key值获取对应的value值
window.localStorage.getTtem('key')
removeItem（key）：删除指定的key值对应的value值
localStorage.removeItem('key')
clear()：删除所有存储的内容
window.localStorage.clear()
二、cookie、localStorage、sessionStorage生命周期比较
数据有效期不同
cookie：可以设置失效时间；如果没有设置失效时间，浏览器关闭后数据会失效
localStorage：数据会永久保存，除非手动清除
sessionStorage：会话当前数据有效就是在浏览器窗口关闭之前有效，浏览器关闭后数据会被清除
三、cookie、localStorage、sessionStorage存放数据大小比较
存储大小限制不同
cookie：传递少量数据，4KB左右。每次http请求都会携带cookie，所以适合存储很小的数据。
localStorage、sessionStorage：保存大量数据，5MB左右
四、http请求不同
cookie：每次http请求都会携带cookie，请求过多保存过多的数据会带来性能问题
web Storage（localStorage和sessionStorage）：只在客户端保存，不参与服务器的交互。
五、cookie、localStorage、sessionStorage的作用域
cookie：同源窗口共享
localStorage：同源窗口共享
sessionStorage：不在不同的浏览器窗口中共享
六、cookie、localStorage、sessionStorage的接口比较
cookie：需要自己封装，原生接口不友好
web Storage（localStorage和sessionStorage）：原生接口友好，API接口更方便。也可以再次封装，对Object和Array有更好的支持
七、cookie、localStorage、sessionStorage的数据更新
web Storage（localStorage和sessionStorage）支持事件通知机制，可以将数据更新的通知发送给监听者。
八、cookie、localStorage、sessionStorage的应用
cookie：不能跨域请求！验证登录、判断是否登陆过网站、保存上次登录的信息、保存上次查看的页面、浏览计数器
localStorage：跨页面传递参数，长期登录，长期保存在本地的数据，数据永久保存除非手动删除
sessionStorage：临时保存数据，页面刷新，敏感账号一次性登录
九、浏览器兼容
localStorage和sessionStorage是html5才应用的新特性，有些浏览器不支持。
十、总结
Web Storage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器，和服务器进行交互。Web Storage提供一种在cookie之外的存储会话数据的方式，可以存储大量数据，可以跨会话。