浏览器缓存笔记

原创 已于 2024-08-28 17:40:51 修改 · 736 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#缓存 #浏览器缓存 #客户端缓存

于 2023-12-19 17:46:05 首次发布

一、浏览器缓存中常见HTTP头部简介

1、Cache-Control响应头

public：表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容。（例如：1.该响应没有max-age指令或Expires消息头；2. 该响应对应的请求方法是 POST 。）

private：表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容，比如：对应用户的本地浏览器。

no-cache：协商缓存，在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证。

no-store：不使用任何缓存，缓存不应存储有关客户端请求或服务器响应的任何内容。

max-age=<seconds>：强制缓存，设置缓存存储的最大周期，超过这个时间缓存被认为过期 (单位秒)。与Expires相反，时间是相对于请求的时间。

s-maxage=<seconds>：强制缓存，覆盖max-age或者Expires头，但是仅适用于共享缓存 (比如各个代理)，私有缓存会忽略它。

2、Expect响应头

Expires: <http-date>：响应头包含日期/时间，即在此时候之后，响应过期。如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

3、ETag响应头

HTTP 响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web 服务器不需要发送完整的响应。而如果内容发生了变化，使用 ETag 有助于防止资源的同时更新相互覆盖（“空中碰撞”）。

4、Last-Modified响应头

是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低，所以这是一个备用机制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的条件请求会使用这个字段。

5、If-Modified-Since 请求头

If-Modified-Since 是一个条件式请求首部，服务器只在所请求的资源在给定的日期时间之后对内容进行过修改的情况下才会将资源返回，状态码为 200 。如果请求的资源从那时起未经修改，那么返回一个不带有消息主体的 304 响应，而在 Last-Modified 首部中会带有上次修改时间。不同于 If-Unmodified-Since, If-Modified-Since 只可以用在 GET 或 HEAD 请求中。

6、If-Unmodified-Since请求头

If-Unmodified-Since 是一个条件式请求首部,只有当资源在指定的时间之后没有进行过修改的情况下，服务器才会返回请求的资源，或是接受 POST 或其他 non-safe 方法的请求。如果所请求的资源在指定的时间之后发生了修改，那么会返回 412 (Precondition Failed) 错误。

7、If-None-Match请求头

If-None-Match 是一个条件式请求首部。对于 GET 和 HEAD 请求方法来说，当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的相匹配的时候，服务器端才会返回所请求的资源，响应码为 200 。如存在服务器端返回响应码 304（Not Modified，未改变）。

二、常见的缓存方式

1、强缓存

        根据 Cache-Control：max-age=<seconds>或 Expires: <http-date>判断为强制缓存。
        例如：Cache-Control 为 max-age = 3000，意思是说在 3000 秒后该资源过期。

2、协商缓存

        根据Cache-Control 值: no-cache 或 max-age=0 判断为协商缓存。

        浏览器会携带缓存标识 If-None-Match、if-modified-since 向服务器发送请求，服务器根据缓存标识来决定该资源是否过期。先判断Etag（如有） = If-None-Match 继续判断 Last-Modified（如有） = if-modified-since 如果都相等304，否则返回服务器资源和200。 
        例如：Cache-Control : no-cache  意思是使用的协商混存。

3、启发式缓存

        当不设置Cache-Control或 Expires时，触发启发式缓存。如Date创建时间大于Last-Modified一年，那么浏览器会默认进行读取本地缓存时间为1year * 0.1约为36.5天，即在接下来的36.5天里，不会发送HTTP请求，直接拉取本地缓存，表现为disk cache或者memory cach。

三、缓存完整流程

1、用户通过浏览器发起请求 。

2、根据 Cache-Control或 Expires字段判断内存中是否存在有效期的强缓存或者启发式缓存，如存在内存中返回资源，不存在继续判断。

3、根据 Cache-Control或 Expires字段判断磁盘中是否存在有效期的强缓存或者启发式缓存，如存在磁盘中返回资源，不存在继续判断。

4、根据 Cache-Control或 Expires字段判断是否是协商缓存和启发式缓存，如是按照协商缓存处理。

5、如Cache-Control： no-store ，则不进行缓存，直接从服务器拉取资源。


四、其他

浏览器和CDN缓存相互独立，CND节点收到协商缓存验证时，直接通过cnd节点中的资源进行验证。（未证实）

Cache-Control等字段经过多个nginx时，如都设置了Cache-Control值将全部体现在返回包中，不会替换。
 

浏览器缓存机制及其分类
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-25 1184
浏览器缓存是提高Web性能的关键因素之一。了解如何利用不同的缓存策略和技巧，可以帮助开发者构建更快、更高效的Web应用。希望本文的内容能够帮助你更好地管理和优化浏览器缓存，从而提升你的Web应用性能。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己。
浏览器缓存相关http头
iteye_8029的博客
04-30 631
最近看雅虎黄金34条，学习下优化网站性能的方法。其中有一条：“为文件头指定Expires或Cache-Control”，具体来说指对于静态内容：设置文件头过期时间Expires的值为“Never expire”永不过期；而对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。 这一条可以和雅虎34条的第一条联系起来，那就是尽量减少http的请求次数（雅虎34条...
浏览器缓存机制、http缓存头
xiaozhuo_tang的博客
10-21 2918
缓存与目的重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。 缓存作为加快页面加载速度的方法，可以说是必不可少的一个方法，如何能更好地运用缓存来服务客户，首先我们就得了解清楚缓存； 缓存流程图先上一张从SegmentFault搬运来的缓存过程图 从图中能很清楚的
浏览器缓存
前端开发-陈善强
10-18 726
为了减少资源请求次数，加快资源访问速度，浏览器会对资源文件如图片、css文件、js文件等进行缓存，浏览器缓存策略有强制缓存和协商缓存
浏览器缓存机制-请求头
泯泷的博客
08-26 485
Expires 是 HTTP 1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，Cache-Control 通用消息头字段，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。服务器收到请求后，会优先根据 Etag 的值（If-None-Match的字段值与该资源在服务器的Etag值做对比）判断被请求的文件有没有做修改，Etag 值一致则认为没有修改，命中协商缓存，返回 304 状态码；
JS缓存与浏览器缓存技术详解 学习笔记
qq_44999678的博客
09-19 1011
缓存与浏览器缓存技术： 一，缓存： 缓存是网络传输中常用到的一种技术，利用缓存可以让我们在数据传输方面更加的方便和快捷。 1.1缓存的优点： 避免冗余的数据传输： 当很多的人去访问一个网站的原始服务器，此时原始服务器会为每个访问着者都发送一份相同的文本。这样就会浪费我们的网络带宽，同时使我们的原始服务器负载加重。假如使用了缓存，此时我们就可以在缓存服务器中备份一份文本，此时再有访问者访问就不用直接和原始服务器对接，让缓存去发送文本。这样可以减少我们的原始服务器的负载压力，同时可以避免一些不必要的数据传输
彻底解决网页显示不全问题：清理浏览器缓存释放内存
mmoo_python的博客
12-07 1841
网页显示不全是一个常见的问题，通常是由于浏览器缓存积累过多导致的。为了解决这个问题，我们需要定期清理浏览器的缓存数据。本文介绍了在谷歌浏览器中清理缓存数据的详细步骤，包括打开设置菜单、进入清除浏览数据功能、设置时间范围并勾选清除选项、进一步清理高级选项中的数据等。通过定期清理浏览器的缓存数据，我们可以释放内存空间、避免显示问题、保护隐私安全，并确保浏览器加载的是网站最新的内容。此外，使用浏览器扩展也可以辅助清理和管理浏览器的数据，提高清理效率和效果。
浏览器数据持久化缓存技术 ——《现代前端技术解析》笔记
sketchlcy的博客
11-02 308
10种跨域解决方法和终极大招 前端跨域请求解决方案
浏览器与性能优化个人笔记
01-08
浏览器缓存机制分为强缓存和协商缓存两种。强缓存可以减少数据传输和服务器压力，改善性能。它通过设置http头中的cache-control和expires属性来实现。协商缓存则在资源未过期时，通过浏览器发送请求到服务器来确认...
Web缓存欺骗漏洞/Web缓存中毒漏洞—笔记
qq_74349936的博客
02-25 1049
当下很多web系统使用web缓存功能来存储一些经常检索的文件，以减少Web服务器画响应的延迟和减轻服务器上的负载。常见的缓存内容往往是静态或公共文件：样式表(css),脚本(Gs),文本文件(tt),图像(png,bmp,gif)等。当一个用户第一次访问了文件，就会被缓存，下一次当有任何一个其他客户端请求该文件时，缓存机制由于已经存储了这个文件，会把缓存的文件内容发送给客户端而不需要去请求Web服务器，这样就减轻了服务器负载。
【前端浏览器】浏览器缓存（http缓存） && 浏览器本地存储（总结）
前端学习博客
03-25 4915
浏览器缓存 && 浏览器本地存储（总结） 文章目录浏览器缓存 && 浏览器本地存储（总结）一、浏览器缓存(http缓存)相关术语1. 对浏览器的缓存机制的理解2. 浏览器资源缓存的位置有哪些？3. 协商缓存和强缓存的区别（http缓存、缓存策略、缓存过程）（1）强缓存ExpiresCache-Comtrol（2）协商缓存Last-Modify/If-Modify-SinceETag/If-None-Match（3）既生Last-Modified何生Etag？4. 为什么需要浏
HTTP协议(一) HTTP协议缓存请求头和响应头详解
文若书生的专栏
08-21 6486
文章目录前言一、HTTP协议怎么实现缓存？1、cache-control2、expire3、last-modified4、if-modified-since5、etag6、if-none-match7、Http协议缓存流程图8、java实现缓存协议的代码片段总结 前言 HTTP协议的缓存的目的是减少相应延迟和减少网络带宽消耗， 比如 css、 js、图片这类静态资源应该进行缓存。实际项目 一般使用反向代理服务器（如 nginx、 apache 等） 进行缓存。下面详细解释HTTP协议对缓存的处理支持
HTTP头部和缓存控制：服务器端
SyDjango的博客
10-05 338
当浏览器发起请求时，服务器会检查资源的ETag或最后修改时间，如果与浏览器发送的请求头中的值相匹配，服务器将返回一个"304 Not Modified"的响应，告诉浏览器可以使用缓存的资源。通过使用适当的HTTP头部和缓存策略，服务器可以控制浏览器如何缓存和重新请求资源，从而提高网站的性能和用户体验。常见的取值包括"no-cache"（不使用缓存）、“public”（可以被公共缓存和代理服务器缓存）和"private"（只能被浏览器缓存）。在过期时间之前，浏览器可以使用缓存的副本而不重新请求资源。
REST笔记(五):你应该知道的HTTP头------ETag
weixin_33811539的博客
12-24 1124
在HTTP1.1规范中，新增了一个HTTP头信息：ETag。对Web开发者来说，它是一个非常重要的信息。它是用作缓存使 用的两个主要的头信息之一 (另一个是Expires)。除此之外，在REST架构中，它还可以用于控制并发操作(上节中已经大 致介绍AtomPub中控制并发的流程)。那么ETag是什么？它又几种类型？强ETag与弱ETag之间有什么区别。？如何计算 ETag值?它与Last-Modi...
什么是ETag
youcijibi的博客
10-18 1432
什么是ETag
浏览器缓存是什么？它的机制又是什么？
lu‘s blog
11-16 9012
对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了“错误”的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟是个什么样的神奇玩意呢？ 什么是浏览器缓存： 简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下...
浏览器缓存——强缓存、协商缓存
m0_64332792的博客
07-18 811
浏览器缓存：强缓存、协商缓存 区别：强缓存不向服务器发送请求，协商缓存会发送请求至服务器 相同点：若命中，都直接从浏览器缓存加载资源，不从服务器加载 由响应头来控制缓存： 强缓存：Expires、Cache-Control 协商缓存（响应头+请求头）：【Last-Modified + If-Modified-Since】、【ETag + If-None-Match】...
设置响应头控制浏览器的缓存
atu99602的博客
11-29 464
概述 缓存这个技术在我们实际的开发中是非常常用的，也是非常重要的一项技术。主要用于客户端（浏览器）向服务器端请求的是一些比较大的数据，并且这个数据在短时间内不会经常发生变化的情况，比如一些网站的logo图片，它是一个网站的标志，一般不会发生变化，如果不缓存的话，而logo图片又比较大的话，那么浏览器每次发送请求时，服务端都要返回logo图片这个大数据信息，会影响到服务器的性能和效率，服...
Http请求头 缓存
weixin_38039976的博客
01-18 2554
Http请求头 缓存http缓存机制强制缓存Cache-ControlExpries对比缓存Last-Modified/If-Modified-SinceEtag/If-None-Match优先级优先级 http缓存机制 http有两种缓存机制：Http缓存 强制缓存：服务器通知浏览器一个缓存时间，在这个时间内发起请求，浏览器拦截请求并直接使用缓存状态码200，否则执行对比缓存 对比缓存：服务器通知浏览器Etag或者Last-Modified，再次请求时候就会在请求头带上对应的If-None-Match/
前端浏览器缓存数据，如何实现
最新发布
06-30
<think>我们将在前端使用浏览器的本地存储（localStorage或sessionStorage）来缓存数据。同时，我们将设计一个缓存策略，包括缓存数据的存储、读取、更新和过期机制。设计思路：1.使用localStorage进行持久化存储，或使用sessionStorage在会话期间存储。2.为每个缓存的数据设置一个过期时间（例如，5分钟）。3.在读取缓存时检查是否过期，如果过期则重新获取数据并更新缓存。4.提供一个缓存管理器类，封装缓存操作。我们将创建一个名为CacheManager的类，包含以下方法：-set(key, data, ttl):存储数据，ttl为缓存有效时间（毫秒）-get(key):获取数据，如果数据不存在或已过期，则返回null-remove(key):移除缓存- clear():清除所有缓存同时，我们还可以考虑使用一个前缀（prefix）来避免与其他应用缓存冲突。代码实现如下：</think># 前端浏览器缓存数据实现方案 在前端开发中，浏览器缓存是提升应用性能和用户体验的关键技术。我将介绍几种常用的浏览器缓存方案，并提供代码实现。 ## 1. localStorage 实现方案 localStorage 提供了一种简单的键值对存储方式，数据在浏览器关闭后仍然保留。 ```javascript // 存储数据 function saveToLocalStorage(key, value) { try { const serializedValue = JSON.stringify(value); localStorage.setItem(key, serializedValue); return true; } catch (error) { console.error('保存到localStorage失败:', error); return false; } } // 读取数据 function getFromLocalStorage(key) { try { const serializedValue = localStorage.getItem(key); return serializedValue ? JSON.parse(serializedValue) : null; } catch (error) { console.error('从localStorage读取失败:', error); return null; } } // 删除数据 function removeFromLocalStorage(key) { localStorage.removeItem(key); } // 使用示例 const userSettings = { theme: 'dark', language: 'zh-CN', fontSize: 16 }; // 存储数据 saveToLocalStorage('user_settings', userSettings); // 读取数据 const savedSettings = getFromLocalStorage('user_settings'); console.log(savedSettings); // {theme: 'dark', language: 'zh-CN', fontSize: 16} // 删除数据 removeFromLocalStorage('user_settings'); ``` ### 优点： - 简单易用 - 存储容量较大（通常5-10MB） - 持久化存储（除非用户清除浏览器数据） ### 缺点： - 同步操作，可能阻塞主线程 - 只能存储字符串 - 同源策略限制 ## 2. sessionStorage 实现方案 sessionStorage 与 localStorage 类似，但数据仅在当前会话中有效。 ```javascript // 存储数据 function saveToSessionStorage(key, value) { try { const serializedValue = JSON.stringify(value); sessionStorage.setItem(key, serializedValue); return true; } catch (error) { console.error('保存到sessionStorage失败:', error); return false; } } // 读取数据 function getFromSessionStorage(key) { try { const serializedValue = sessionStorage.getItem(key); return serializedValue ? JSON.parse(serializedValue) : null; } catch (error) { console.error('从sessionStorage读取失败:', error); return null; } } // 使用示例 const sessionData = { cartItems: [1, 2, 3], lastVisitedPage: '/products' }; saveToSessionStorage('shopping_session', sessionData); ``` ### 适用场景： - 临时会话数据 - 表单草稿保存 - 页面间临时传递数据 ## 3. IndexedDB 实现方案 对于更复杂的数据结构和大数据量，IndexedDB 提供了类似数据库的存储能力。 ```javascript // 打开或创建数据库 function openDB(dbName, version) { return new Promise((resolve, reject) => { const request = indexedDB.open(dbName, version); request.onerror = (event) => { reject(`数据库打开失败: ${event.target.error}`); }; request.onsuccess = (event) => { resolve(event.target.result); }; request.onupgradeneeded = (event) => { const db = event.target.result; // 创建对象存储空间（类似表） if (!db.objectStoreNames.contains('cache')) { const store = db.createObjectStore('cache', { keyPath: 'id' }); // 创建索引 store.createIndex('expires', 'expires', { unique: false }); } }; }); } // 存储数据 async function saveToIndexedDB(data) { const db = await openDB('myCacheDB', 1); return new Promise((resolve, reject) => { const transaction = db.transaction(['cache'], 'readwrite'); const store = transaction.objectStore('cache'); // 添加过期时间 const cacheItem = { ...data, expires: Date.now() + 3600000 // 1小时后过期 }; const request = store.put(cacheItem); request.onsuccess = () => resolve(); request.onerror = (event) => reject(event.target.error); }); } // 读取数据 async function getFromIndexedDB(id) { const db = await openDB('myCacheDB', 1); return new Promise((resolve, reject) => { const transaction = db.transaction(['cache'], 'readonly'); const store = transaction.objectStore('cache'); const request = store.get(id); request.onsuccess = (event) => { const data = event.target.result; // 检查是否过期 if (data && data.expires > Date.now()) { resolve(data); } else { resolve(null); } }; request.onerror = (event) => reject(event.target.error); }); } // 使用示例 const productData = { id: 'product_123', name: '高性能笔记本电脑', price: 1299, description: '最新款高性能笔记本电脑...' }; // 存储 await saveToIndexedDB(productData); // 读取 const cachedProduct = await getFromIndexedDB('product_123'); console.log(cachedProduct); ``` ### 优点： - 支持复杂数据结构 - 异步操作，不阻塞主线程 - 存储容量大（通常50%磁盘空间） - 支持事务和索引 ### 缺点： - API 较复杂 - 需要处理数据库版本迁移 ## 4. 缓存策略实现 结合上述存储方案，实现一个带过期机制的缓存管理器： ```javascript class CacheManager { constructor(storageType = 'localStorage', prefix = 'cache_') { this.storage = storageType === 'localStorage' ? localStorage : sessionStorage; this.prefix = prefix; } // 生成带前缀的键名 getKey(key) { return `${this.prefix}${key}`; } // 设置缓存 set(key, value, ttl = 3600000) { // 默认1小时 const cacheItem = { data: value, expires: Date.now() + ttl }; try { this.storage.setItem(this.getKey(key), JSON.stringify(cacheItem)); return true; } catch (error) { console.error('缓存设置失败:', error); return false; } } // 获取缓存 get(key) { const cached = this.storage.getItem(this.getKey(key)); if (!cached) return null; try { const cacheItem = JSON.parse(cached); // 检查是否过期 if (cacheItem.expires > Date.now()) { return cacheItem.data; } else { // 过期则删除 this.remove(key); return null; } } catch (error) { console.error('缓存解析失败:', error); this.remove(key); return null; } } // 删除缓存 remove(key) { this.storage.removeItem(this.getKey(key)); } // 清除所有带前缀的缓存 clear() { Object.keys(this.storage).forEach(key => { if (key.startsWith(this.prefix)) { this.storage.removeItem(key); } }); } } // 使用示例 const cache = new CacheManager(); // 设置缓存（有效期10秒） cache.set('user_profile', { name: '张三', age: 30 }, 10000); // 立即获取 console.log(cache.get('user_profile')); // {name: '张三', age: 30} // 10秒后获取 setTimeout(() => { console.log(cache.get('user_profile')); // null (已过期) }, 10000); ``` ## 5. Service Worker 缓存策略 对于更高级的缓存需求，可以使用 Service Worker 实现离线缓存： ```javascript // service-worker.js const CACHE_NAME = 'my-app-cache-v1'; const urlsToCache = [ '/', '/index.html', '/styles/main.css', '/scripts/main.js', '/images/logo.png' ]; // 安装阶段：缓存核心资源 self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); // 激活阶段：清理旧缓存 self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) ); }) ); }); // 请求拦截：缓存优先策略 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // 返回缓存或网络请求 return response || fetch(event.request); }) ); }); // 注册 Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(registration => { console.log('ServiceWorker 注册成功:', registration.scope); }) .catch(error => { console.log('ServiceWorker 注册失败:', error); }); }); } ``` ## 缓存策略选择指南 | 方案 | 适用场景 | 容量限制 | 持久性 | 复杂度 | |------|----------|----------|--------|--------| | localStorage | 用户偏好设置、小量数据 | 5-10MB | 持久 | 低 | | sessionStorage | 会话数据、表单草稿 | 5-10MB | 会话级 | 低 | | IndexedDB | 复杂数据、大数据量 | 50%磁盘 | 持久 | 中高 | | Service Worker | 静态资源、离线应用 | 50%磁盘 | 持久 | 高 | | Cookies | 用户认证、小量数据 | 4KB | 可设置 | 低 | ## 最佳实践 1. **数据分类存储**：根据数据类型选择合适存储方案 2. **设置过期时间**：避免使用过期数据 3. **缓存版本控制**：在键名中包含版本号（如 `cache_v1_user`） 4. **错误处理**：所有缓存操作都应包裹在 try-catch 中 5. **清理机制**：定期清理过期缓存 6. **容量检查**：存储前检查可用空间 ```javascript // 检查 localStorage 可用空间 function checkLocalStorageSpace() { try { const testKey = 'storage_test'; let data = ''; // 填充数据直到达到限制 while (true) { data += '0'.repeat(1024 * 1024); // 每次增加1MB localStorage.setItem(testKey, data); } } catch (error) { localStorage.removeItem(testKey); const usedSpace = Math.round(JSON.stringify(localStorage).length / 1024); console.log(`已使用空间: ${usedSpace}KB`); } } // 使用前检查 if (checkLocalStorageSpace() > 4500) { // 当使用超过4.5MB时 clearExpiredCache(); } ``` ## 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值