在前端中的缓存

article/2025/3/15 11:07:48

http缓存

http缓存基本认识

在这里插入图片描述

http缓存分为强缓存协商缓存

1、浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器。

2、当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源。

强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器

协商缓存没有命中的时候,浏览器直接从服务器加载资源数据。

前端缓存

localStorage 和sessionStorage的相同点

  • localStoragesessionStorage这两个都是用于存储客户端数据的。 也被称为前端缓存webStorage
  • localStorage和sessionStorage的存储大小都是5M。
  • localStorage和sessionStorage都只能存储字符串类型数据。

localStorage 和sessionStorage的区别

是否可以跨页面通讯
1)sessionStorage

使用sessionStorage缓存的数据不可进行跨页面通讯,因为sessionStorage的生命周期是基于浏览器页面的。

注意: 不过同一个页面下嵌套的iframe属于同源。同页面下的iframe之间可以进行通讯。

2)localStorage
使用localStorage缓存的数据可以进行跨页面通讯。一个窗口存储的数据在另一个窗口可以拿到。
localStorage👇
在这里插入图片描述

是否会随着浏览器关闭而清除

  • sessionStorgae存储的数据在页面被关闭以后会自动被清除不会保留。
  • localStorage存储的数据除非我们手动清除,否则一直存在。

localStorage和sessionStorage的应用场景

最常用的就是登录信息了。localStorage的话比较适合长期有效的自动登录。
sessionStorage比较适用于短期有效的自动登录(比如token过期重新请求)。
注意:在适用sessionStorage和localStorage的时候,存储的敏感数据(比如账号密码)最好都加密一下。
在浏览器的“应用程序”里是可以看到的↓

cookie

cookie存储量较小最多4kb已经很少使用

sessionStorgae和localStorage的使用方式

sessionStorage
存储


sessionStorage.setItem("key","val");

读取


sessionStorage.getItem("key","val");

删除指定键


sessionStorage.removeItem("key","val");

删除全部


sessionStorage.clear();

localStorage
存储


localStorage.setItem("key","val");

读取


localStorage.getItem("key","val");

删除指定键

localStorage.removeItem("key","val");

删除全部

localStorage.clear();

结论

  • localStorage可以跨页面通讯。sessionStorage不可以跨页面通讯
  • localStorage不会随着页面关闭而被清除,他只能手动清除。
  • sessionStorage会随着页面的关闭而清除。
  • localStorage和sessionStorage的存储大小都是5M。

http://chatgpt.dhexx.cn/article/09ZBiI7y.shtml

相关文章

前端缓存方案

前端几种本地缓存机制_蜗牛小前的博客-CSDN博客_前端本地缓存在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge 1.Cookie的特点1)cookie的大小受限制,cookie大小被限制在4KB,不能…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说,缓存主要分为浏览器缓存(比如 localStorage、sessionStorage、cookie等等)以及http缓存,也是本文主要讲述的。 当然叫法也不一样,比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

前端浏览器缓存机制

目录 1 缓存定义及其优点2 强缓存2.1 expires 和 Cache-Control 3 协商缓存4 浏览器缓存位置 1 缓存定义及其优点 什么是缓存? 当我们第一次访问网站的时候,电脑会把网站上的图片和数据下载到电脑上,当我们再次访问的时候,网站就会…

前端缓存机制

目录 前言 目的 缓存过程分析 强制缓存(强缓存) 强制缓存的缓存规则 浏览器的缓存存放在哪里 协商缓存 更新缓存 合理应用缓存 前言 对于浏览器缓存,每个前端开发者应该都不会陌生,同时它也是我们在日常开发中存在的一个…

前端缓存【web缓存】

前端缓存--http缓存 web缓存http缓存定义优点缺点http缓存类型 强缓存Expires实现的强缓存Cache-control实现的强缓存 协商缓存last-modified实现的协商缓存ETag实现的协商缓存缺点 设置缓存文件缓存(html、js、css、png)总结 web缓存 web缓存主要指:浏…

前端缓存(HTTP缓存、浏览器缓存)浅析

前端缓存 文章目录 前端缓存缓存分类1、http缓存(1)强缓存(本地缓存)启发式缓存 (2)协商缓存(弱缓存) 2、浏览器缓存 其他响应头和请求头参数刷新正常重新加载硬性重新加载清空缓存并硬性重新加载 调试缓存 缓存分类 1、http缓存 …

前端缓存最佳实践

点击上方“前端开发博客”,选择“设为星标” 回复“2”加入前端群 作者:黑金团队https://juejin.cn/post/6844903737538920462 前言 缓存,这是一个老生常谈的话题,也常被作为前端面试的一个知识点。本文,重点在与探讨在…

技术点:前端缓存分类及使用

前端缓存 什么是 web 缓存(前端缓存) web 缓存主要指的是两部分:浏览器缓存和 http 缓存 浏览器缓存:比如,localStorage,sessionStorage,cookie 等等。这些功能主要用于缓存一些必要的数据,比如用户信息。比如需要携…

前端缓存详解

目录 前言 一、按缓存位置分类 HTTP状态码及区别 几种状态的执行顺序 Memory Cache Disk Cache Service Worker 请求网络 二、HTTP 缓存 HTTP 缓存分类 强缓存原理 协商缓存原理 更新和废弃缓存 三、缓存小结 四、缓存的优点 五、浏览器缓存策略 五、缓存的应…

一文!彻底弄懂前端缓存

前端缓存 前端缓存,这是一个老生常谈的话题,也常被作为前端面试的一个知识点。今天我们再来总结一下。 分类 前端缓存分为强缓存和协商缓存两种。 强缓存 强缓存主要使用Expires、Cache-Control 两个头字段,两者同时存在Cache-Control 优先级…

【前端页面缓存技术方案】

前端页面缓存技术方案 关于页面缓存数据的纯前端技术方案背景项目存在的现有方案思考🤔其他技术调研react-activationreact-router-cache-route 结论 关于页面缓存数据的纯前端技术方案 背景 为了优化用户的体验,可能会遇到这样的需求:在列…

前端常用缓存技术

http://www.cnblogs.com/belove8013/p/8134067.html 今天刚上班就听到群里的几位大佬在讨论所开发的系统需要重复的登录的恶心之处,听各位大佬争辩的同时,想到了自己以前整理过的缓存技术,算是比较全面的,当然了只是帮助自己理解的…

我的网站心得之缓存技术(前端篇)

在前端面试中,storage是面试官经常问的问题,我先问你几个问题,如果你回答不上来,那么你应该阅读一下:知道storage吗?storage存储的数据类型有什么?sessionStorage的生命周期?你都用l…

中高级前端工程师都需要熟悉的技能--前端缓存

前言 web缓存是高级前端工程师必修技能。是我们变成大牛过程中绕不开的知识点。 文章会尽量用通俗易懂的言语来细说web缓存的概念和用处。 本期文章的大纲是 什么是web缓存(前端缓存) 缓存可以解决什么问题?他的缺点是什么? …

ovo svm_反思我在OVO担任远程产品设计实习生的时间

ovo svm In a quiet bedroom accompanied only by the low humming of my laptop fan, I sat before a Google Hangouts meeting, and got to know my colleagues for the first time, unaware of the joy of a ride that was waiting for me at OVO Design. 在一个安静的卧室里…

反思最近这些时日的荒废

为什么80%的码农都做不了架构师?>>> 算是一时兴起,最近lol排位已经将自己的折磨的不成人样。闲了这么久,是时候找份工作了。最近一直没敢跟家里人打电话,实在不知道该说些什么,一开口便是谎言。是否自己真的…

团队愿景_周一的愿景,每日的成果,周五的远程团队管理反思

团队愿景 My friend J.D. Meier has an amazing blog called Sources of Insight and hes written a fantastic book called Getting Results the Agile Way. You can buy his book on Amazon (its free on Kindle Unlimited!). I put J.D. up there with David Allen and Step…

WPBeginner年满10岁-反思,更新和WordPress赠品(奖金124,000美元以上)

Wow, it’s the tenth fourth. Today, WPBeginner is officially 10 years old — feels unreal to type this! 哇,是第十位 今天,WPBeginner正式成立了10岁-键入此图标感到不切实际! Like every year, I want to take a few minutes and d…

误泄露公司代码、疫情期间被裁,一个“菜鸟”程序员的生存日记

作者 | Adam Hughes 译者 | Sambodhi 策划 | Tina 编辑|燕珊 “我是如何从每一次失败中成长起来的。” 身为程序员,我们往往都了解大神级程序员的故事。比如很小就开始编程,在 11 岁时就创建了第一家能盈利的网站,16 岁上大学、17…

失败需要反思

2019独角兽企业重金招聘Python工程师标准>>> 公司的第一款游戏是抄袭的COC,然而我加入进去的时候开发已过半,进入之后主要是参与一些新的系统与玩法的开发,在我加入到这个项目之后还开发了大概半年时间,据说此前已经开…