持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
这篇我们来介绍性能优化之浏览器存储与缓存。
Web Storage
Storage事件
本质：当Storage对象发生变化时，即创建/修改/删除时被触发，修改的页面不会触发事件，但与它共享的页面会触发Storage事件！
Storage事件的回调有一个event参数，该参数包含以下属性：
- key:修改或输出的key值，如果clear则为null
- newValue:新设置的值，如果clear则为null
- oldValue:调用改变前的value值，如果clear为null
- url:触发该事件变化的页面的url
- storageArea:当前的stora对象
sessionStorage和LocalStorage区别
- sessionStorage关闭了当前的页面，则存储的key-value就被销毁。
- LocalStorage在最新谷歌浏览器中，就是关闭了会话，存储的key-value也依然保持着，只有调用clear或清空缓存才消失。
LocalStorage实现跨页面通信
//页面一。当input失去焦点时触发
document.getElementById('input').onblur = function () {
//因为localStorage关闭会话，保存的信息依旧存在，所以可以使用他来跨页面通信！
localStorage.setItem('demo',this.value)
}
//页面二。当任意一个页面使用了storage，就会触发该回调
window.addEventListener('storage',function (event) {
console.log(event.key)
console.log(event.newValue)
document.getElementById('val').value= event.newValue
})
session/LovalStorage常用方法
- xxxStorage.getItem('Key'):指定参数名称key，返回对应的键值对
- xxxStorage.set('Key','value')"指定key--value键值对，用于保存数据到存储中，如果指定的key存在，则更新对应的value值
- xxxStorage.removeItem（‘Key’指定一个key参数，从存储中删除对应的数据
- xxxStorage.clear()该方法会清空存储中的所有键值对
缓存
浏览器在本地磁盘上将用户之前的请求的数据存储起来，当用户再次需要请求时，无需要再次发送请求，直接从浏览器本地获取数据。
好处
- 减少http请求次数。
- 减轻服务器的压力。
- 提高浏览器网页的加载速度，提高用户体验。
分类
- 强缓存
- 概念:当用户第一次请求后，将资源保存下来，用户访问都不再向服务器发送请求，直接从本地缓存中获取。
- 请求资源的状态码为：200 ok (memory cache)。
- 协商缓存
- 概念:向服务器发送请求，服务器会根据请求体的资源判断之前是否请求过，判断是否命中协商缓存。
- 命中，则返回304状态码，通知浏览器从缓存中读取资源。 两者的异同：
- 同：都是从浏览器端读取资源。
- 异： 1、强缓存不发请求给服务器。2、协商缓存发请求给服务器，根据服务器返回的信息在决定是否走缓存。
