深入理解浏览器缓存机制

浏览器缓存机制

前端缓存分为网络(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


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

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

904 声望
1.2k 粉丝
0 条评论
推荐阅读
前端图片压缩方案
先通过 js 中 img 构造函数,实例化 img 对象,后将图片的路径给转移到中,再建立一个 canvas 画布,后对画布进行各方面的数值的设置。

九旬

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

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

904 声望
1.2k 粉丝
宣传栏