1、localStorage
localStorage 是一种 Web 存储（Web Storage）技术，它属于浏览器提供的客户端存储机制。localStorage 的特点使它被广泛用于持久性的数据存储，即使在浏览器关闭并重新打开之后，数据仍然保留。
localStorage 的特点：
-
持久性存储：
localStorage中的数据不会过期，除非用户手动清除浏览器数据或者通过代码显式地删除数据，否则数据会一直保留。 -
基于键值对存储：
localStorage使用简单的键值对结构进行存储，每个存储的条目都是一个字符串类型的键和值。 -
存储容量：
localStorage的存储容量通常为 5MB 左右（具体大小可能因浏览器而异）。相较于sessionStorage和cookies，它能存储更多的数据。 -
同源策略：
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];
}
