日常我们数据存储的方式常见的几种就是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中每条cookie的存储空间为4k。

创建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;  }},