前端缓存机制及其特点

1、localStorage

localStorage 是一种 Web 存储（Web Storage）技术，它属于浏览器提供的客户端存储机制。localStorage 的特点使它被广泛用于持久性的数据存储，即使在浏览器关闭并重新打开之后，数据仍然保留。

localStorage 的特点：

1. 持久性存储：localStorage 中的数据不会过期，除非用户手动清除浏览器数据或者通过代码显式地删除数据，否则数据会一直保留。

2. 基于键值对存储：localStorage 使用简单的键值对结构进行存储，每个存储的条目都是一个字符串类型的键和值。

3. 存储容量：localStorage 的存储容量通常为 5MB 左右（具体大小可能因浏览器而异）。相较于 sessionStorage 和 cookies，它能存储更多的数据。

4. 同源策略：localStorage 遵循同源策略，同一浏览器中不同域名或端口的网页不能访问彼此的 localStorage 数据。

优势示例：

• 用户偏好设置：可以用来存储用户的主题、语言等偏好设置，这样即使用户关闭了浏览器，下次再打开时这些设置也能被保留。
• 状态保持：一些轻量级的应用可能会使用 localStorage 来保持用户的登录状态或者保存简单的应用数据。

// 保存数据到 localStorage
localStorage.setItem('username', 'JohnDoe');

// 从 localStorage 中获取数据
let user = localStorage.getItem('username');
console.log(user); // 输出 "JohnDoe"

// 删除数据
localStorage.removeItem('username');

// 清除所有 localStorage 数据
localStorage.clear();

2、Session Storage

• 特点: 类似于 localStorage，但数据只在浏览器会话（即窗口或标签页）期间有效。一旦会话结束（即窗口或标签页关闭），数据就会被清除。
• 用途: 适用于需要在单次浏览会话期间保持的数据，如表单信息或短暂的用户交互状态。

示例：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 中获取数据
let data = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

3、Cookies

• 特点: Cookies 是服务器与客户端之间传递数据的常用机制，具有可设置的过期时间。每次请求都会携带 Cookies 数据，影响性能，因此适合存储少量、与会话相关的数据。
• 用途: 主要用于会话管理、用户跟踪和存储少量用户偏好数据等。

// 设置 cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 读取 cookie
let cookies = document.cookie;

// 删除 cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

4、IndexedDB

• 特点: IndexedDB 是一个低级别的 API，允许在浏览器中存储大量的结构化数据（如对象和文件），并支持高级查询（如索引和事务）。
• 用途: 适合存储大量的、复杂的数据结构，比如离线应用的数据缓存、大型游戏数据等。

// 创建/打开数据库
let request = indexedDB.open("myDatabase", 1);

request.onsuccess = function(event) {
    let db = event.target.result;
    // 操作数据库
};

// 处理其他数据库操作的逻辑

5、Cache Storage (Service Workers)

• 特点: Cache Storage 是 Service Workers 的一部分，允许应用程序缓存网络请求及其响应，以支持离线使用和提高性能。
• 用途: 主要用于 PWA（Progressive Web Apps）和其他需要离线支持的应用，可以缓存资源文件（HTML、CSS、JS）或 API 响应。

// 打开缓存并添加资源
caches.open('my-cache').then(function(cache) {
    cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
    ]);
});

// 读取缓存中的资源
caches.match('/index.html').then(function(response) {
    if (response) {
        // 资源存在
    }
});

6、Service Workers

• 特点: Service Workers 是一个在后台运行的脚本，允许开发者拦截和处理网络请求，包括缓存资源以实现离线访问。
• 用途: 主要用于构建离线应用、PWA，提供资源的预缓存、离线支持和后台数据同步等功能。

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/index.html',
                '/styles.css',
                '/script.js'
            ]);
        })
    );
});

7、Memory Cache

• 特点: 内存缓存是数据存储在浏览器的内存中，数据生命周期通常只存在于当前页面加载期间，浏览器关闭或页面刷新后数据即丢失。
• 用途: 常用于临时数据存储，如在组件或页面内保持数据状态，通常通过变量或数据结构（如对象、数组）实现。

// 简单的内存缓存
let cache = {};

function setCache(key, value) {
    cache[key] = value;
}

function getCache(key) {
    return cache[key];
}