F12 后尘封的秘密：探索存储器 “F4”

2024-02-04 14:30:59

前言

在前端面试中，关于浏览器的问题中，有一类是关于本地存储的问题。这些问题考察的是前端工程师对浏览器的基础知识储备。而 F12 后存储器中的“F4”正是这方面的重点考察对象。

四大存储

在 F12 -> Application 界面中，我们可以看到四个与存储相关的选项：

Cookies ：Cookies 是最古老的存储方式，只能存储少量数据，且有安全隐患。
Local Storage ：Local Storage 可以存储较多的数据，且永久有效，除非手动清除或浏览器清除缓存。
Session Storage ：Session Storage 与 Local Storage 类似，但数据只在当前会话中有效，当浏览器关闭后就会被清除。
IndexedDB ：IndexedDB 是一种非关系型数据库，可以存储大量结构化数据，且支持索引和查询。
Cache Storage ：Cache Storage 主要用于缓存静态资源，以提高页面的加载速度。

“F4” 的神秘之处

在这四个存储选项中，F4 对应的是 Cache Storage。Cache Storage 在 F12 界面中的位置比较隐蔽，因此也显得更加神秘。它主要用于缓存静态资源，例如图片、CSS 和 JavaScript 文件。通过缓存这些资源，当用户再次访问同一页面时，浏览器可以从缓存中直接加载，从而减少服务器请求次数，提高页面加载速度。

使用 Cache Storage

使用 Cache Storage 时，需要用到以下步骤：

打开一个 Cache Storage 对象：```javascript
const cache = await caches.open('my-cache');
向 Cache Storage 中添加资源：```javascript
await cache.add('my-image.png');
从 Cache Storage 中获取资源：```javascript
const response = await cache.match('my-image.png');
删除 Cache Storage 中的资源：```javascript
await cache.delete('my-image.png');