一、Cookie

• 什么是Cookie

    数据存储到计算机中，通过浏览器控制添加与删除数据

• Cookie特点

    - 存储限制: 一个域名100个Cookie，每个4kb;
    - Cookie会包含在每个HTTP请求中向服务器发送，这回导致多次发送重复数据；
    - Cookie在网络传输时并未加密，也可能会有安全隐患;
    - 页面间的Cookie是共享的;

• 设置cookie

  // num过期时间，单位秒
  function setCookie(cname, cvalue, num){
      var d = new Date()
      d.setTime(d.getTime() + (num*1000))
      var expires = 'expires=' + d.toGMTString()
      
      document.cookie = cname + '=' + cvalue + '; ' + expires
      console.log(document.cookie)
  }

• 获取cookie

  function getCookie(cname){
      // 多个值存储  username=atom; password=123; age=18
      var name = cname + '='
      var ca = document.cookie.split(';')
      for(var i=0; i<ca.length; i++){
          // 去除前后的空格
          var c = ca[i].trim()
          
          if(c.indexOf(name) == 0)
              return c.substring(name.length, c.length)
      }
      
      return ''
  }

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