存储

cookie

HTTP是无状态协议，所以Cookie的出现用于保持会话状态，具体来说cookie机制采用的是在客户端保持状态的方案

Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器。

session

而session机制采用的是一种在服务器端保持状态的解决方案. 由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的

cookie localStorage sessionStorage indexDB

特性	cookie	localStorage	sessionStorage	indexCB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4k	5M	5M	无限
与服务端通信	每次都会携带在header中，对于请求性能影响	不参与	不参与	不参与

cookie已不建议用于本地存储。如果没有大量数据存储需求，可以使用localStorage和sessionStorage，对于不怎么改变的数据尽量使用localStorage存储，否则可以用sessionStorage

对于cookie，还需要注意安全性

属性	作用
value	如果用于保存用户登录状态，应该将该值加密，不能使用明文的用户标识
http-only	不能通过js访问cookie，减少xss攻击
secure	只能在协议为https的请求中携带
same-site	规定浏览器不能在跨域请求中携带cookie，减少csrf攻击

---

service worker

service worker 本质上充当web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。它们还允许访问推送通知和后台同步API。

目前该技术通常用来做缓存文件，提高首屏速度，可以试着实现这个功能

// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(registration => {
      console.log('service worker 注册成功')
    })
    .catch(err => {
      console.error('service worker 注册失败')
    })
}

// sw.js
// 监听install事件，回调缓存所需文件
self.addEventListener('install', event => {
  event.waitUntil(caches.open('my-cache').then(cache => {
    return cache.addAll(['./index.html', './index.js'])
  }))
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request).then(response => {
    if (response) return response
    console.log('fetch source')
  }))
})