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];
}