区分localStorage,sessionStorage和cookie

1. 生命周期
   1. cookie
      1. 如果有设置max-age,该文件只要没有超过该时间,用户没有手动删除,或者不通过js的api方法删除,就永不销毁
      2. 如果没有设置max-age,该cookie就是会话级cookie,浏览器关闭,标签页关闭都会导致cookie被销毁
   2. localStorage
      1. 除非用户手动删除,或者通过js的api方法删除,否则永不销毁(持久化存储)
   3. sessionStorage
      1. 浏览器关闭,标签页关闭都会导致sessionStorage被销毁
2. 存储位置
   1. cookie
      1. 如果有设置max-age,存储于硬盘中
      2. 如果没有设置max-age,存储于内存中
   2. localStorage
      1. 硬盘
   3. sessionStorage
      1. 内存
3. 存储大小
   1. cookie -> 4KB
   2. localStorage -> 5MB,在IE上,3MB左右
   3. sessionStorage -> 5MB
4. 与服务器之间的关系
   1. cookie(他是被借用的本地存储)
      1. 服务器创建,浏览器存储
      2. 服务器通过在响应头中,添加属性Set-Cookie来传递cookie数据
      3. 浏览器通过在请求头中,添加属性Cookie来向服务器传递cookie数据
   2. localStorage
      1. 他是浏览器的本地存储,与服务器不熟
   3. sessionStorage
      1. 他是浏览器的本地存储,与服务器不熟
5. cookie的特点:
   1. 浏览器会自动发送和存储cookie,不需要前端操心
      1. 每个请求都会发送cookie
   2. cookie使用约束限制很大
      1. 用户可以禁用cookie,很可能导致某些功能失效
      2. 服务器可以控制浏览器对cookie的读写操作
         1. 通过httpOnly可以控制前端能否看到该cookie
         2. 通过domain属性可以控制当前cookie的作用域名范围
      3. cookie安全性不好
6. token和以上三者有什么关系
   1. token本质只是一个字符串
   2. token是服务器将用户唯一标识加密之后得到的乱码字符串
   3. 与上述三者最大的关系,就是token经常被存入到以上三种技术中
7. 如何跨标签页(页面)通信?
   1. 方案一:使用localStorage
      1. 注意:localStorage只能够在相同域名情况下,跨页面通信
      2. 流程:
         1. 在B页面中,可以给window添加事件监听:storage监视当前localStorage的变化
         2. 在A页面中,使用localStorage.setItem添加key值,B页面就会触发事件监听回调函数
   2. 方案二:使用网页的domain属性
      1. 流程:
         1. 在A页面中,修改A页面的document.domain为两个页面共同的顶级域名
         2. 使用window.open方法,打开全新的页面,同时接受window.open的返回值(这个返回值是新开页面的window对象)
         3. 在B页面中,修改B页面的document.domain为两个页面共同的顶级域名
         4. 在B页面中,声明全局变量,存入需要传递的数据
         5. 在A页面,通过步骤2中获取的window对象,直接读取B页面数据