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

存储:

**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跳转,前进后退等)强制缓存有效,协商缓存有效
  • 手动刷新(点击刷新按钮)强制缓存失效,协商缓存有效
  • 强制刷新 强制缓存失效,协商缓存失效

你可能感兴趣的:(前端学习总结二: 存储 状态码 缓存)