Cookie容量小且每次请求携带，适合存储身份信息；2. localStorage持久化存储，容量大，仅限客户端使用；3. sessionStorage会话级存储，关闭页面即清除；4. IndexedDB支持大量结构化数据存储，适用于复杂应用。根据数据大小、生命周期和同步需求选择合适方案可提升性能与体验。
在Web开发中，浏览器提供的本地存储方案让开发者可以在用户设备上保存数据，提升性能和用户体验。JavaScript提供了多种本地存储方式，每种都有其适用场景和限制。以下是主流的浏览器本地存储方案及其使用方法。
Cookie
Cookie 是最早期的客户端存储方式，通常用于保存用户身份信息（如登录状态），每次HTTP请求都会携带Cookie内容。
特点：
- 容量小，一般不超过4KB
- 可设置过期时间、作用域（domain/path）和安全标志（HttpOnly、Secure）
- 会随每个请求发送到服务器，增加网络开销
- 易受XSS和CSRF攻击，需谨慎处理
使用示例：
d
ocument.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
读取Cookie需要解析document.cookie字符串。
localStorage
作为Web Storage API的一部分，localStorage提供持久化存储，数据不会因关闭浏览器而丢失。
特点：
- 容量较大，通常为5~10MB
- 仅在客户端使用，不参与网络传输
- 数据永久保存，除非手动清除或通过代码删除
- 只能存储字符串，对象需用JSON.stringify转换
常用方法：
localStorage.setItem('theme', 'dark');const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear();
sessionStorage
与localStorage类似，但生命周期仅限于当前会话。页面关闭后数据自动清除。
适用场景：临时保存表单数据、页面间传参等。
操作方式与localStorage一致：
sessionStorage.setItem('formTemp', JSON.stringify(data));IndexedDB
一个低级的、基于事务的数据库系统，适合存储大量结构化数据，比如离线应用中的文件、图片索引等。
特点：
- 容量大，可达到几十甚至上百MB（取决于浏览器和磁盘空间）
- 支持索引、事务、异步操作
- 学习成本较高，API较复杂
- 适用于需要离线工作的PWA或复杂前端应用
简单使用流程：
const request = indexedDB.open('MyDB', 1);request.onsuccess = function(event) {
const db = event.target.result;
const tx = db.transaction('users', 'readwrite');
tx.objectStore('users').add({name: 'Alice', age: 25});
};
基本上就这些常见的JavaScript本地存储方案。选择哪种方式，取决于你的数据大小、生命周期需求以及是否需要同步到服务器。合理使用它们，可以显著提升应用的响应速度和用户体验。
