localStorage和sessionStorage

localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案

相同点

• 都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带
• 都是以键值对的形式存在，即Key-Value形式，常用的Api也相同
• 存储类型都是String类型，当进行存储时，会调用toString()方法转为String类型
• 对于每个域容量是有限的，不同浏览器不一样，大部分存储为5M左右

不同点

• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• SessionStorage会在用户关闭浏览器后，即会话结束后，数据失效；SessionStorage与服务端Session无关。

localStorage 本地存储

localStorage 本地存储 把数据存储在浏览器端

方法：

​ 保存数据 localStorage.setItem(属性名字符串,属性值)

​ 获取数据 localStorage.getItem(属性名字符串)

​ 删除数据 localStorage.removeItem(属性名字符串)

​ 清空数据 localStorage.clear()

localStorage 存储特点：

1.如果把数据存储在localStorage里 除非手动删除 否则他就会一直存在(关闭浏览器 电脑重启 等等 都不会删除)

2.数据的本地存储是按照不同网站来存储的(不同域名)

3.本地存储数据 只能存储字符串

​ 对于复杂数据类型 先使用JSON.stringify方法把复杂数据转换成json字符串

​ 获取时 使用JSON.parse将其转换回来 进行还原

sessionStorage 临时存储

用法跟localStorage 一样

​ sessionStorage.setItem();

​ sessionStorage.getItem();

​ sessionStorage.removeItem();

​ sessionStorage.clear();

​ 生命周期不一样 localStorage是永久存储 sessionStorage是会话级存储 页面关闭就删除

localStorage与sessionStorage的封装（可设置过期时间）

1  //存储,可设置过期时间
2 function set(key, value, expires) {
3     // console.log(key);
4     let params = { key, value, expires };
5     if (expires) {
6         // 记录何时将值存入缓存，毫秒级
7         var data = Object.assign(params, { startTime: new Date().getTime() });
8         localStorage.setItem(key, JSON.stringify(data));
9     } else {
 10         if (Object.prototype.toString.call(value) == '[object Object]') {
 11             value = JSON.stringify(value);
 12         }
 13         if (Object.prototype.toString.call(value) == '[object Array]') {
 14             value = JSON.stringify(value);
 15         }
 16         localStorage.setItem(key, value);
 17     }
 18 }
 19 //取出
 20 function get1(key) {
 21     let item = localStorage.getItem(key);
 22     // 先将拿到的试着进行json转为对象的形式
 23     try {
 24         item = JSON.parse(item);
 25     } catch (error) {
 26         // eslint-disable-next-line no-self-assign
 27         item = item;
 28     }
 29     // 如果有startTime的值，说明设置了失效时间
 30     if (item && item.startTime) {
 31         let date = new Date().getTime();
 32         // 如果大于就是过期了，如果小于或等于就还没过期
 33         if (date - item.startTime > item.expires) {
 34             localStorage.removeItem(name);
 35             return false;
 36         } else {
 37             return item.value;
 38         }
 39     } else {
 40         return item;
 41     }
 42 }
 43 
 44 //导出
 45 module.exports = {
 46     set,
 47     localget:get1
 48 };
 49 存：request.set('uid',option.uid,43200000);//时间单位毫秒级
 50       request.set('token',option.token,43200000); 
 51 取：let uid = request.localget('uid');
 52       let token = request.localget('token');

sessionStorage 、localStorage和cookei的区别：