一、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用在如购物车、身份验证等问题上。