第20天 js存储

cookie，localStorage，sessionStorage，indexDB

从上表可以看到， cookie 已经不建议⽤于存储。如果没有⼤量数据存储需 求的话，可以使⽤ localStorage 和
sessionStorage 。对于不怎么改变 的数据尽量使⽤ localStorage 存储，否则可以⽤ sessionStorage
存储

对于 cookie 来说，我们还需要注意安全性。

Service Worker

Service Worker 是运⾏在浏览器背后的独⽴线程，⼀般可以⽤来实现缓存功能。使⽤ Service Worker
的话，传输协议必须为 HTTPS 。因为 Service Worker 中涉及到请 求拦截，所以必须使⽤ HTTPS 协议来保障安全
Service Worker 实现缓存功能⼀般分为三个步骤：⾸先需要先注册 Service Worker ，然后监听到 install
事件以后就可以缓存需要的⽂件，那么在下次⽤户访问 的时候就可以通过拦截请求的⽅式查询是否存在缓存，存在缓存的话就可以直接读取缓存⽂件，否则就去请求数据。以下是这个步骤的实现：

// index.js
if (navigator.serviceWorker) {
 navigator.serviceWorker
 .register('sw.js')
 .then(function(registration) {
 console.log('service worker 注册成功')
 })
 .catch(function(err) {
 console.log('servcie worker 注册失败')
 })
 }
// sw.js
// 监听 `install` 事件，回调中缓存所需⽂件
self.addEventListener('install', e => {
 e.waitUntil(
 caches.open('my-cache').then(function(cache) {
 return cache.addAll(['./index.html', './index.js'])
 })
 ) })
// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接⽤缓存，否则去请求数据
self.addEventListener('fetch', e => {
 e.respondWith(
 caches.match(e.request).then(function(response) {
 if (response) {
 return response
 }
 console.log('fetch source')
 })
 ) })

打开⻚⾯，可以在开发者⼯具中的 Application 看到 Service Worker 已 经启动了
在 Cache 中也可以发现我们所需的⽂件已被缓存
当我们重新刷新⻚⾯可以发现我们缓存的数据是从 Service Worker 中读取 的