什么是缓存？

第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来

缓存的优点

1. 缓解服务器压力，不用每次都去请求某些数据
2. 提升性能
3. 减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗

浏览器缓存

1. cookie
2. session
3. localstorage
4. sessionstorage

浏览器缓存过程

1. 强缓存
   • 当我们访问一个访问过的网页的时候，不会向服务器发送请求，而是直接从缓存中读取资源，同时会返回200的状态码
2. 协商缓存
   • 强缓存失效后，浏览器携带缓存标识向服务器发送请求，由服务器根据缓存标识来决定是否使用缓存的过程

缓存方案

• HTML：协商缓存
• CSS/JS/图片资源：强缓存，文件名带上hash

cookie

1. 服务器发送到浏览器的一小块数据，浏览器会进行缓存，并与下一次请求发送到服务器
2. 可以设置有效时长，没设置的话，会话结束旧失效，存储大小4kb左右，不超过20个
3. 会自动携带再请求头中，过多使用cookie老保存数据会导致性能问题
4. 主要用途
   1. 会话管理：登陆，购物车，游戏得分等
   2. 个性化：用户偏好，主题或其他设置
   3. 记录和分析用户行为
5. 使用方法

    document.cookie = 'token'+'='+cookie

session

1. 客户端请求服务端，服务端会为这次请求开辟一块内存空间，这个对象便是session对象
2. 服务器可以利用session存储客户端在同一个会话期间等一些操作记录
3. 仅保存当前会话，会话关闭失效

localstorage和sessionstorage

• 区别
  1. localstorage：本地缓存，没有时间限制，一直缓存在本地
  2. sessionstorage：会话缓存，浏览器关闭时清除缓存
• 容量
  • 5mb左右
• 用法
  1. 设置缓存：localstorage.setItem(key,value)
  2. 获取缓存：localstorage.getItem(key)
  3. 获取全部：localstorage.valueOf()
  4. 清空全部：localstorage.clear()
  5. 删除指定数据：removeItem(key)