我Javascript 本地存储的方式有哪些？
# Javascript 本地存储的方式有哪些？# 一、JavaScript 本地存储方式JavaScript 提供多种方式来存储数据，以下是常见的四种本地存储方式：
CookiesessionStoragelocalStorageIndexedDB# 二、各存储方式解析# 1. CookieCookie 是一种早期用于保存用户状态的小型文本数据。它最初是为了解决 HTTP 无状态协议问题。
特点：
数据大小：约 4KB。生命周期：可以设置到期时间。数据传输：每次 HTTP 请求都会附带到请求头中。安全性：如果未加密，容易被窃取。适用场景：
用户登录态标记。跟踪用户行为。示例：
// 设置 Cookie
document.cookie =
'username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';
// 读取 Cookie
console.log(document.cookie);
// 删除 Cookie（将其设置为过期时间）
document.cookie =
'username=John; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
# 2. sessionStoragesessionStorage 是 HTML5 提供的浏览器存储方式。数据仅在当前会话（窗口或标签页）中有效。
特点：
数据大小：约 5MB（视浏览器而定）。生命周期：页面会话，关闭页面或标签后清除。数据作用域：同源的窗口或标签页不共享。适用场景：
页面临时数据（例如：表单数据、未提交的数据）。示例：
// 设置数据
sessionStorage.setItem('key', 'value');
// 获取数据
console.log(sessionStorage.getItem('key'));
// 删除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();
# 3. localStoragelocalStorage 是一种持久化的本地存储方式。数据不会因关闭浏览器而清除，除非用户主动删除。
特点：
数据大小：约 5MB。生命周期：永久存储。数据作用域：同源下所有页面共享。适用场景：
保存长期使用的数据（如用户偏好、Token）。示例：
// 设置数据
localStorage.setItem('username', 'John');
// 获取数据
console.log(localStorage.getItem('username'));
// 删除数据
localStorage.removeItem('username');
// 清除所有数据
localStorage.clear();
# 4. IndexedDBIndexedDB 是一种低级 API，用于存储大量结构化数据，是一个真正的浏览器端数据库。
特点：
数据大小：理论上无限制（实际由浏览器限制）。数据类型：支持对象、文件等结构化数据。操作：异步，性能高。生命周期：永久存储，除非手动删除。适用场景：
存储大数据，例如离线文档、文件缓存。示例：
// 打开或创建数据库
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = function (event) {
const db = event.target.result;
console.log('Database opened:', db);
};
request.onupgradeneeded = function (event) {
const db = event.target.result;
// 创建对象存储
db.createObjectStore('MyStore', { keyPath: 'id' });
};
# 三、存储方式的区别特性CookiesessionStoragelocalStorageIndexedDB存储大小~4KB~5MB~5MB理论上无限制生命周期设置过期时间会话结束时清除永久存储永久存储数据传输每次请求都会发送到服务器不随请求发送不随请求发送不随请求发送数据作用域同源同源，同标签页同源同源操作复杂性简单简单简单较复杂# 四、适用场景总结Cookie
保存用户状态信息，如登录态。设置跨会话的小型标记。sessionStorage
保存临时数据，如表单未提交的数据。页面切换间的数据临时存储。localStorage
保存较长期、较小的用户偏好设置。保存 Token 或其他长期使用的数据。IndexedDB
大量数据的存储，如离线应用、文件缓存。存储复杂结构化数据。# 五、扩展链接Web Storage API - MDNopen in new windowIndexedDB API - MDNopen in new window
