一、Cookie

什么是Cookie
  数据存储到计算机中，通过浏览器控制添加与删除数据
Cookie特点
  - 存储限制: 一个域名Cookie数是有限的(根据浏览器而定)，每个4kb;
  - Cookie会包含在每个HTTP请求中向服务器发送，这回导致多次发送重复数据；
  - Cookie在网络传输时并未加密，也可能会有安全隐患;
  - 页面间的Cookie是共享的;

二、Storage

使用Storage保存key-value时，key、value都只能是字符串(如果有复杂数据，可以将结构化数据封装成JSON，再将JSON对象转为字符串保存)。

sessionStorage
  - session临时会话，从页面打开到页面关闭的时间段；
  - 窗口的临时促成了，页面关闭，本地存储消失；
localStorage
  - 永久存储(可以手动删除数据)
Storage的特点
  - 存储量限制(5M);
  - 客户端完成，不会请求服务器处理；
  - sessionStorage数据是不共享、localStorage共享

三、Storage操作方法

setItem()

• 设置数据，key/value类型，类型都是字符串；
• 可以用获取属性的形式操作；

 window.sessionStorage.setItem('name', oText.value);
 window.localStorage.setItem('name', oText.value);
getItem()

• 获取数据，通过key来获取到对对应的value；

  window.sessionStorage.getItem('name')
  window.localStorage.getItem('name')
removeItem()

• 删除数据，通过key来删除对应的value；

 window.sessionStorage.removeItem('name');
 window.localStorage.removeItem('name');
clear()

• 删除全部存储的值;

  window.sessionStorage.clear();
  window.localStorage.clear();
案例: 存储注册信息(第一次没填写完关闭，当第二次打开时，之前填写的内容还是存在的)
// 当窗口关闭时触发window.onunload = function(){}

四、Storage存储事件

storage事件

• 当有数据修改或删除的情况下，就会触发storage事件
• 在对数据进行改变的窗口对象是不会触发的
• key: 修改或删除的key，如果调用clear()，key为null
• newValue: 新设置的值，如果调用removeStorage()，key为null
• oldValue: 调用改变前的value值
• storageArea: 当前的storage对象
• url: 触发该脚本变化的文档的url
• sessionStorage在同窗口下才可以，例如iframe操作就是同窗口的操作；

// 添加storage事件(本窗口不触发，在其他窗口触发)
window.addEventListener('storage', function(ev){
   ev = ev || window.event;
   console.log('key:' + ev.key);
   console.log('newValue:' + ev.newValue);
   console.log('oldValue:' + ev.oldValue);
   console.log('storageArea:' + ev.storageArea);
   console.log('url:' + ev.url);      
});

案例: 同步购物车(不管哪个页面操作了，但都是同步的)

离线缓存策略

1、localStorage, sessionStorage(字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心)
2、indexedDB (浏览器中持久地存储结构化数据的数据库)
3、web sql(已经被废弃)
4、application cache (完全离线资源缓存，加载更快 降低服务器负载，单地址页面对实时性要求不要的业务 离线web应用)

之前会使用cookies，每次的http请求头中，都会带有cookies——缺点；每个域名只能存储4K大小的cookies；主域名污染: 如果我们使用cookies存储主域名的东西，那么子域名下得Http请求都会带上主域名的东西；如果关联上网络，那么将带来安全问题。
所以，通常我们会使用cookies用在如购物车、身份验证等问题上。

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。