JS常用几种存储方式的使用规则与各自特征

日常我们数据存储的方式常见的几种就是sessionStroage, localStroage, cookie，下面先依次总结各自的使用规则，然后再到这三者之间的区别。

sessionStroage

sessionStroage是HTML5新增的一个回话存储对象，用于临时保持同一窗口的数据，窗口关闭数据也将删除。

存储单个变量:

存储数据： sessionStroage.setItem('name', 'Tiboo')

读取数据： sessionStroage.getItem('name')

存储JSON对象:

info = {
   name: 'Tiboo',
   number: '1204914',
   guid: '00123'
}
存储值： 将对象转换为JSON字符串
sessionStroage.setItem('info', JSON.stringify(info));
读取值： 将JSON字符串转换为对象
let infoData = JSON.parse(sessionStroage.getItem('info'))

localStroage

localStroage是HTML5新增特性，本地存储，同时不受时间限制的数据存储，localStorage中一般浏览器支持的是5M大小。

存储单个变量:

存储数据： localStroage.setItem('name', 'Tiboo')

读取数据： localStroage.getItem('name')

存储JSON对象:

info = {
   name: 'Tiboo',
   number: '1204914',
   guid: '00123'
}
存储值： 将对象转换为JSON字符串
localStroage.setItem('info', JSON.stringify(info));
读取值： 将JSON字符串转换为对象
let infoData = JSON.parse(localStroage.getItem('info'))

删除单个数据：

localStorage.removeItem('info');

删除所有数据：

localStorage.clear()

由于localStorage中一般浏览器支持的是5M大小，故当缓存中数据大于5M时，出现不存储数据，也不会覆盖现有数据，并且引发QUTA_EXCEEDED_ERR异常,故可以通过异常来强制清除缓存，如下所示：

try {
   localStorage.setItem('info', JSON.stringify(info));
  } catch (e) {
     //存储满了,全部删除
     localStorage.clear();
     localStorage.setItem('info', JSON.stringify(info));
}

cookie

cookie用于存储web页面的用户信息，当用户访问web页面时，他的名字可以记录在cookie中，在用户下一次访问该页面时，可以在cookier中读取用户访问记录
客户端Cookie 数量最多为300个，每个不能超过4kb, 每个web站点设置的cookie 数量不能超过20个

创建cookie:

 this.setCookie('b2bPartnerId', partnerId)
 // 设置过期时间为30天
 setCookie(name, value) { 
   let Days = 30; 
   let exp = new Date(); 
   exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 
   document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString(); 
 },

读取cookie:

let partnerId = this.getCookie('b2bPartnerId')
getCookie(name) { 
  let arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  arr = document.cookie.match(reg)
  if (arr) {
    if (arr.length) {
      return unescape(arr[2]); 
    } else {
      return null; 
    }
  } else {
    return null;
  }
},

工作时没注意遇到的小坑：

在设置完cookie值后，便立即从cookie中获取值，此时可能出现拿到的值为空。因为cookie值的设置与电脑的性能是有关系的，那个时刻cookie值可能还未设置成功。