浏览器缓存（sessionStorage、localStorage、cookie）

• sessionStorage，关闭窗口清除

• localStorage，强缓存，手动删除

• cookie，设置有效期

 1. sessionStorage

特性1： 强制刷新不会清楚数据  （MDN： 只读sessionStorage属性访问当前源的会话存储对象。会话存储类似于本地存储；不同之处在于，虽然localStorage中的数据不会过期，但当页面会话结束时，sessionStorage中的数据将被清除。）

特性2： 多个窗口数据不会同步  （MDN： 每当在浏览器的特定选项卡中加载文档时，都会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。）

MDN

 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，**这点和 session cookies 的运行方式不同。

基本使用

  // 存储
  sessionStorage.setItem("lastname", "Smith")
  // 检索
  let cacheInfo = sessionStorage.getItem("lastname");
  console.log(cacheInfo); //Smith

  // 删除
  sessionStorage.removeItem("lastname");
  cacheInfo = sessionStorage.getItem("lastname");
  console.log(cacheInfo); //null

  // 删除所有数据
  sessionStorage.clear();

特定情境

  // 1. 可以以字符、数组作为形参，当获取数据时会自动转换为字符串形式！
  // 2. 重复写入会替换之前的数据
  sessionStorage.setItem('7', '777')
  // 输出 => undefined
  sessionStorage.getItem('7')
  // 输出 => '777'

  sessionStorage.setItem('pxq', 111)
  // 输出 => undefined
  sessionStorage.getItem('pxq')
  // 输出 => '111'

  sessionStorage.setItem('pxq', true)
  // 输出 => undefined
  sessionStorage.getItem('pxq')
  // 输出 => 'true'

 各种数据的处理方式

对于存储的数据会强制转换为字符串，所以当获取时需要进行对应的转换！

本人在日常使用中整理的，如有不足感谢指正补充！

  // 数字
  let cacheInfo = sessionStorage.getItem('pxq')
  if (cacheInfo !== NaN) {
    return true
  } else {
    return false
  }

  // 数组
  var arr = ['pxq', 111];
  var str = JSON.stringify(arr);
  sessionStorage.setItem('pxq', arr);
  // 获取
  JSON.parse(sessionStorage.getItem('pxq'));
  // 输出 ['pxq', 111]

  // 对象
  // 存储
  var obj = { Hellow: 'world' };
  var str = JSON.stringify(obj);
  sessionStorage.setItem('pxq', str);
  // 获取
  JSON.parse(sessionStorage.getItem('pxq'));
  // 输出 { Hellow: 'world' }

localStorage

更新中...

cookie

更新中...