前端学习总结二： 存储 状态码 缓存

存储：

**cookie: **

• 存储大小 4kb
• http 请求时需要发送到服务端
• 使用 document.cookie = '...' 修改

localstorage、sessionstorage：

• 存储大小 5M
• local 为永久存储，session 关闭浏览器即删除
• 使用 .setItem() 和 .getItem() 修改

状态码分类：

• 1xx 服务器收到请求
• 2xx 请求成功
• 3xx 重定向
• 4xx 客户端报错
• 5xx 服务端报错

常见状态码

• 200 成功
• 301 永久重定向 （配合 localstorage ，浏览器自动处理）
• 302 临时重定向 （配合 localstorage ，浏览器自动处理）
• 304 资源未被修改
• 404 资源未找到
• 403 没有权限

RestFull API

• 一种新的 API 设计方法

• 传统 API 设计：把每个 url 当做一个功能
  /api/list?pageIndex=2
  用 method 表示操作类型
  get 请求 /api/creat-blog
  post 请求 /api/updata-blog?id=100
  get 请求 /api/get-blog?id=100

• RestFull API 设计：把每个 url当做一个唯一资源，
  /api/list/2 （不使用url参数）
  用 method 表示操作类型
  post 请求 /api/blog
  patch 请求 /api/blog/100
  get 请求 /api/blog/100
  delete 请求 /api/blog/100

http headers

常见的 Request Header

Accept: application/json, text/plain, / 浏览器可接收的数据格式
Accept-Encoding: gzip, deflate, br 浏览器可接收的压缩算法
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 浏览器可接收的语言
Connection: keep-alive 一次 TCP 链接重复使用
cookie
Host
User-Agent 简称 UA ，浏览器信息
Content-type 发送数据的格式 如：application/json

常见的 Response Header

Content-Type: application/json; charset=utf-8 返回数据的格式
Content-Length: 13427 返回数据的大小
Content-Encoding: gzip ，返回数据的压缩算法

缓存相关的 headers：
Catch-Control， Expires， Last-Modified， If-Modifide-Since，Etag， If-None-Match

强制缓存

Catch-Control

控制强制缓存的逻辑
值： max-age, no-cache, no-store, private, public

依旧是来自双越老师的图

image.png

**关于 Expire **
同为控制缓存过期，但已被 Cache-Control 代替

协商缓存

• 服务器端缓存策略
• 服务器判断客户资源，是否和服务端资源一样
• 一致则返回 304，否则返回 200 和最新的资源

image.png

资源标识：在 response Headers中，有两种

• Last-Modified 资源最后的修改时间
• Etag 资源的唯一标识（哈希）

image.png

image.png

Last-Modified 和 Etag
会优先使用 Etag ，因为 Last-Modified 只能精确到秒级
如果资源被重复生成，而内容不变，则 Etag 更精确

image.png

不同的刷新操作，不同的缓存策略

• 正常操作（地址栏输入 url跳转，前进后退等）强制缓存有效，协商缓存有效
• 手动刷新（点击刷新按钮）强制缓存失效，协商缓存有效
• 强制刷新 强制缓存失效，协商缓存失效