Cookies和localStorage、sessionStorage区别及用法

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

    setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    clear () ——  删除所有的数据

    key (index) —— 获取某个索引的key

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。

//存
function setLocalStorage(key,value){
    window.localStorage.setItem(key,JSON.stringify(value))
}
//取
function getLocalStorage(key,value){
    let val = window.localStorage.getItem(key)
    return val
}
//测试
setLocalStorage('demo',[1,2,3])
let a = getLocalStorage('demo')
console.log(a);
//localStorage.removeItem('demo') //移除存储的某数据
//localStorage.clear(); //清除数据
结果如图：

sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

    setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    clear () ——  删除所有的数据

    key (index) —— 获取某个索引的key

cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取