cookie、localStorage、sessionStorage初步的学习

js有三种数据存储方式：

sessionStorage
localStorage
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用于存储web页面的用户信息，当用户访问web页面时，他的名字可以记录在cookie中，在用户下一次访问该页面时，可以在cookie中读取用户访问记录,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;
  }
},

相同与不同点

相同点：都保存在浏览器端，同源的
不同点：

传递方式不同
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
数据大小不同
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
数据有效期不同
- sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持
- localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
- cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
作用域不同
- sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
- localStorage 在所有同源窗口中都是共享的
- cookie也是在所有同源窗口中都是共享的
- Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者
- Web Storage 的 api 接口使用更方便