js——浏览器缓存（http缓存）和本地存储

最新推荐文章于 2024-09-20 01:28:24 发布
最新推荐文章于 2024-09-20 01:28:24 发布
阅读量3.9k 收藏 4
点赞数 5
分类专栏： JavaScript ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leilei7407/article/details/117897295
版权
本文深入探讨了JavaScript在浏览器缓存（HTTP缓存）和本地存储方面的作用。通过创建HTTP服务和实例代码，解释了强制缓存（Expires与Cache-Control）和协商缓存（Last-Modified与ETag）的工作原理。示例展示了如何配置这些缓存策略，以优化网页资源的加载速度和减少服务器负载。
摘要由CSDN通过智能技术生成

http缓存链接

这里是引用
在这里插入图片描述
http缓存的好处：
v

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事先代码准备：

创建一个http服务
在这里插入图片描述
在集成终端中，输入node app.js启动服务
在这里插入图片描述
此时，在浏览器中输入localhost:3000，结果如下
在这里插入图片描述

新建一个index.html页面，内容如下
在这里插入图片描述
现在希望服务器能将这个页面发送过来，所以修改app.js内容
在这里插入图片描述
此时，在浏览器中输入localhost:3000后，结果如下，可以看出，此时显示的就是index.html页面
在这里插入图片描述

基于上面的内容，开始讲解强制缓存和协商缓存

index.html内容如下
在这里插入图片描述
此时，如果不修改app.js代码，仍用上面的那个代码，在浏览器中输入localhost:3000后结果如下，可以看见，图片没有加载出来，原因是服务端没有处理图片
在这里插入图片描述
修改app.js，如下：

最低0.47元/天 解锁文章
徕胖
关注
专栏目录
前端性能优化——浏览器缓存机制
weixin_44283145的博客
06-21 504
????(一)浏览器缓存概览 关于前端性能优化，一直是一个老生常谈的话题，在性能优化的诸多方法中，缓存可以说是性能优化中简单高效的一种优化方式了。 ????那么浏览器缓存可以在哪方面给我们带来实质性的性能优化呢？ ????我们知道从我们从输入 URL 到页面加载完成，大致可以分为5个步骤 DNS 域名解析 建立TCP 连接 HTTP 请求抛出 服务端处理请求，HTTP 响应返回 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户 浏览器缓存可以帮助我们在第3和第5步骤中优化性能。利用浏览器存储机制
JS缓存三种方法
王世凡的技术博客
08-05 221
在开发JavaScript应用程序时，浏览器缓存是一个值得注意的问题。IndexedDB是HTML5提供的一种本地存储方案，详细介绍可以查看我之前写的文章《IndexedDB详解》。localStorage是HTML5引入的本地存储方案，它可以在浏览器关闭后依然保存存储的数据。上述三种JavaScript缓存方式各具特点，可以根据具体应用场景选择合适的方式。localStorage的优点有多种，如可设置过期时间，缺点是存储容量较小。它可以被用来拦截和处理网络请求，同时可以提供离线缓存和推送通知等功能。
HTTP+JS+浏览器缓存技术
12-02
总结了浏览器缓存的原理，如何管理浏览器缓存
网站缓存清理不掉？一篇文章带你解决
2301_80064376的博客
08-14 560
浏览器在使用过程中会产生大量的缓存，如何清理缓存？下面是Edge浏览器清理缓存的操作步骤，其他游览器大差不差。
http缓存JS
weixin_44891495的博客
10-23 394
http缓存
sessionStorage和localStorage介绍
Hoshizola的博客
03-20 378
Web Storage中定义了2个对象：sessionStorage和localStorage。这两种API提供了在 浏览器中不受浏览器页面刷新影响而存储数据的方式。 Storage类型 Storage类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。Storage实例有以下方法： clear()：删除所有值 getItem(name)：取得给定name的值 key(index)：取得给定数值位置的名称 removeItem(name)：删除给定name的名/值对 setItem(name, v
JavaScript基础之缓存机制：HTTP缓存机制
lee前端技术站
08-10 1010
说到前端的缓存机制，无非就是俩中，一种是浏览器缓存机制，一种就是我们今天要说的HTTP缓存机制。那么接下来就说说这HTTP缓存机制。 什么是HTTP缓存？ HTTP缓存指的是，当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。 常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。 http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回
浏览器缓存 JavaScript 操作
Milmon的博客
01-27 2904
建立一个 5 MiB 的前端数据库！
前端性能优化(三)——浏览器九大缓存方法
2401_84097696的博客
04-09 724
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，
前端性能优化(三)——浏览器九大缓存方法(1)
radcb55226的博客
04-22 1124
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。[外链图片转存中…(img-nZUecdw4-1713722117723)]由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。
js、css、img等浏览器缓存问题的2种解决方案
12-02
细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新 方法一 生成随机数字 代码如下: [removed][removed] 缺点，浏览器缓存失去意义，每次都动态加载。 方法二 版本号控制,设置全局变量，每次发布前版本号加1 代码如下: [removed]“>[removed] 推荐这种做法，这种做法比较简单。缺点
浏览器-http缓存和本地存储
最新发布
JavaZwb的博客
09-20 580
http缓存分为强缓存和协商缓存，协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义，大部分 web 服务器都默认开启协商缓存，而且是同时启用两种协商缓存浏览器。本地存储包括 localStorage、sessionStorage、cookie、indexDB
JavaScript浏览器缓存的几种方式！
start1018的博客
03-29 2121
每个域名端口下都会存在一份独立的 sessionStorage 数据，它是有过期时间的，当你关闭当前页面（包含浏览器选项卡）时，sessionStorage 缓存会被销毁。每个域名端口下都会存在一份独立的 localStorage 数据，它是没有过期时间的，只要你不手动清除，那么它会永远都在。cookie 是一些缓存数据，主要存储在你的电脑中。默认情况下，没有设置过期时间，当浏览器关闭时 cookie 就会被删除（关闭当前选项卡不会删除）。相当于把旧的 cookie 进行了删除，在创建新的 cookie。
实践这一次,彻底搞懂浏览器缓存机制
weixin_33836223的博客
01-21 425
前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。 [实践系列]前端路由 [实践系列]Babel原理 [实践系列]Promises/A+规范 有兴趣的同学可以关注 [实践系列] 。 求star求follow~ 如果觉得自己已经掌握浏览器缓存机制知识的同学,可以直接看实践部分哈~ 目录 1. DNS 缓存 // 虽说跟标题关系不大,了解一下也不错 2. CDN 缓存 // ...
js浏览器缓存
qq_36262295的博客
01-14 427
浏览器缓存,HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类， 我将其分为强制缓存，对比缓存（协商缓存）。 强缓存主要通过http响应头中的Cache-Control和Expires两个字段来控制的 对比缓存通过HTTP的last-modified，Etag字段进行判断。 ...
JS——浏览器缓存
qq_43201350的博客
06-06 206
sessionStorage.setItem('gdtkeepCache', this.keepCache) sessionStorage.getItem('gdtkeepCache')
JavaScript基础之缓存机制：浏览器缓存机制
lee前端技术站
08-10 3230
缓存可以说是网站性能优化非常有用的一种方式。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 一、缓存的位置 从缓存的位置来说，主要是分为四种，如果这四种都没有命中，才回去发起网络请求
js文件被浏览器缓存了，清缓存
qq_42241895的博客
08-29 3049
以前很少关注这方面的问题，直达我们的技术经理找我们说要换框架，为什么换框架呢，因为缓存的问题，原来的项目是用版本号作为刷新的依据的。因为微信 公众号上有这样一个机制，使用版本好的话，有时做不到及时刷新，所以就用了vue.js,因为它有这样的功能就是如果某个文件里面的数据改变了，那么vue.js就会把这个文件的名字也相应的改掉，所以缓存里面的东西 就用不了了，这样就做到了及时刷新，向后台请求数据。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值