cookie、sessionStorage、localStorage区别一文超详细整理

在上一篇博客中整理一些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之外的存储会话数据的方式，可以存储大量数据，可以跨会话。