Cookie

  • 存储的数据量非常小，只有 4K 的大小
  • 数据会自动携带到请求头里

  • 但服务器端可能并不关心这些数据，所以会造成带宽的浪费

    sessionStorage

  • 存储的数据仅在本次会话有用，会话结束后会自动失效，而且数据仅在当前窗口有效，同一源下新窗口也访问不到

    localStorage

  • 绝大多数浏览器有 5M 的大小限制

  • 可以永久存储，而且同源下数据多窗口也能共享
  • 在 setItem 时，可能会达到大小限制，最好加上错误捕捉
  • 使用 Loader 加载静态文件（basket.js)
    • 查看请求的文件 url 是否有缓存到 localStorage
      • 过期或不匹配，到第 2 大步
      • 文件内容有效，到第 4 大步
      • 如果没有，到第 2 大步
      • 如果有，判断文件是否过期或版本号是否匹配
    • 请求远程文件
    • 缓存最新文件内容
    • 执行文件内容
  • 借助服务器端将静态文件 inline 化
    • 这个方式比上面那种更进一步，在第一次响应时把需要放入 localStorage 的文件都内联进 html 中，后面每次响应只要文件版本没有变化，都是渲染一段从 localStorage 加载该文件的代码。这样做的好处是可以有效减少请求次数，即使是第一次
  • 使用 localStorage 缓存文件会有 XSS 的风险

其他应用场景

  • redux-localstorage可以快速执行localstorage:
  1. npm install --save redux-localstorage@rc