深入理解浏览器缓存机制

九旬

浏览器缓存机制

前端缓存分为网络(HTTP)缓存和浏览器本地储存。

http-cache.jpg

HTTP 缓存机制

请移步:网络协议-HTTP-缓存缓存机制

浏览器本地储存

我们先来通过表格学习下这几种存储方式的区别

特性CookielocalStoragesessionStorageindexedDB
数据声明周期一般由服务器生成,可以设置过期时间除非被清理,否在一直存在页面关闭就清理除非被清理,否在一直存在
数据储存大小4k5M 左右5M 左右理论无限
与服务端通信请求时会携带在 Http 的 header 中,对于请求性能稍有影响不参与不参与不参与

<!-- | 用途 | 权限验证等 -->

Cookie

主要用于存储一下用户相关的信息,如登录、权限、token 等,但是不宜过大,因为每次 http 请求都会带上,所以会稍微影响性能。
对于 cookie 来说,还需要注意一些安全性。

| 属性 | 作用 |
| value | 如何用于保护用户登录态,应该将值加密 |
| http-only | 不能通过 JS 访问 Cookie,减少 XSS 攻击 |
| secure | 只能在协议为 HTTPS 的请求中携带 |
| same-site | 规定浏览器不能再跨域请求中携带 Cookie,减少 CSRF 攻击 |

Cookie 的本职工作并非是本地存储,而是“维持状态”。
因为 HTTP 是一种无状态的协议,也就是说,客户端请求一次,服务端就响应一次,中间没有留下任何信息。
就像一个经常和你聊天的朋友,天南地北的都什么都聊,可每次你都不知道你们上一次聊得是什么,以及他叫什么名字。
那怎么办才能让他知道我是我呢?
这时候就需要 Cookie 了,Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件,它附着在 HTTP 请求上,在浏览器和服务器之间“飞来飞去”。
它可以携带用户信息,当服务器检查 Cookie 的时候,便可以获取到客户端的状态,也就可以证明我是谁了。
Cookie 是以键值对的形式存储的。

优点

  • 后端设置
  • 解决鉴权问题

缺点

  • 只有 4m,太小
  • 过量的 Cookie 会带来巨大的性能浪费
  • 不能跨域

Web Storage

localStorage

  • 本地永久储存,除非手动清除,否在一直存在
  • 大小:5M 左右
  • 用于储存稳定的资源:如 CSS、js、小图等。

sessionStorage

  • 页面回话存储,关闭页面自动清除。
  • 大小:5M 左右
  • 用于临时的数据:如 token、个人信息、权限、购物车信息等

需要注意的是localStorage和sessionStorage都是遵循同源策略的:

    • localStorage只要在相同的协议、相同的主机名(二级域名也不行)、相同的端口下,就能读取/修改到同一份localStorage数据。

      • sessionStorage比localStorage更严苛一点,除了协议、主机名(二级域名也不行)、端口外,还要求在同一窗口(也就是浏览器的标签页)下。

使用

  • 存储数据:setItem()
    localStorage.setItem('user_name', 'xiuyan')
  • 读取数据: getItem()
    localStorage.getItem('user_name')
  • 删除某一键名对应的数据: removeItem()
    localStorage.removeItem('user_name')
  • 清空数据记录:clear()
    localStorage.clear()

indexedDB

IndexedDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是 5M、10M 这样小打小闹级别了。

理论上来说,IndexedDB 是没有存储上限的(一般来说不会小于 250M)。它不仅可以存储字符串,还可以存储二进制数据。

本人用的也不是很多,具体用法可以参考:浏览器数据库 IndexedDB 入门教程

PWA

PWA(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。 这组文档和指南告诉您有关 PWA 的所有信息。

其实我的理解,就是在浏览器或者其他客户端应用缓存一个 webapp,一次使用,就将代码都缓存到本地,再次打开无需重复加载。

是不是觉得很熟悉,这不就是微信小程序吗?

其实现在的微信小程序、快应用都算是一种 PWA 的实现。

比如:vuePress 就支持转 PWA 应用

参考:MDN-PWA

阅读 258

九旬的博客
关注我,每周输出一篇前端技术文章,博客地址:[链接]

关注我,每周输出一篇前端技术文章,

695 声望
1k 粉丝
0 条评论
你知道吗?

关注我,每周输出一篇前端技术文章,

695 声望
1k 粉丝
宣传栏