在 JavaScript 中，​​本地存储（Local Storage）​​ 是指浏览器提供给前端开发者用来在用户设备上​​持久化存储数据​​的几种机制。它们允许你在不依赖后端服务的情况下，​​在浏览器中长期或临时保存数据​​，常用于用户偏好设置、登录状态保持、缓存数据等场景。

✅ 一、JS 本地存储的常见方式

1. ​​Cookie

Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP无状态导致的问题

✅ 特点：

  • 存储在浏览器中，​​每次 HTTP 请求都会自动携带​​（在请求头 Cookie字段中）。如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie保持登录态的网站上，如果 cookie被窃取，他人很容易利用你的 cookie来假扮成你登录网站，标记为 Secure的 Cookie只应通过被HTTPS协议加密过的请求发送给服务端

  • ​​容量较小​​：每个 Cookie 通常不超过 ​​4KB​​，一个域名下一般限制在 ​​20~50 个 Cookie​​。

  • ​​有过期时间​​：可以设置过期时间（Expires / Max-Age 优先级更高）。

  • Expires 用于设置 Cookie 的过期时间

  • Max-Age 用于设置在 Cookie 失效之前需要经过的秒数

  • ​​可设置作用域​​：通过 Domain和 Path控制哪些路径/域名可以访问。

  • ✅ 用途：

  • 传统用于身份验证（如 Session ID）、用户跟踪。

  • 但​​不适合存储大量数据​​，且有隐私和安全问题（如 CSRF）。

📌 示例：

// 设置 cookie
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

// 读取 cookie（需自己解析）
console.log(document.cookie); // username=JohnDoe; otherKey=value...

// 删除 cookie（设置过期时间为过去）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

2. ​​LocalStorage（本地存储）​​

✅ 特点：

       生命周期：​​持久化存储​​，数据​​不会随着浏览器关闭而消失​​，除非手动删除。

  • 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。

  • ​​存储容量较大​​：一般为 ​​5MB~10MB​​（不同浏览器可能略有差异）。

  • ​​仅支持字符串类型​​，存储对象需用 JSON.stringify()和 JSON.parse()转换。

  • ​​同源策略​​：只能在​​相同协议、域名、端口​​下访问。

  • ​​不自动发送到服务器​​，仅在客户端使用。

  • localStorage 也不是完美的，它有两个缺点：

  • 无法像Cookie一样设置过期时间
  • 只能存入字符串，无法直接存对象

✅ 用途：

  • 保存用户主题设置、语言偏好、表单草稿、缓存数据等。

  • 适合存储​​非敏感、长期保存​​的数据。

📌 示例：

// 存数据
localStorage.setItem('username', 'Alice');

// 取数据
const user = localStorage.getItem('username'); // 'Alice'

// 删除某个 key
localStorage.removeItem('username');

// 清空所有 localStorage
localStorage.clear();

3. ​​SessionStorage（会话存储）​​

✅ 特点：

  • sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据

  • ​容量与 LocalStorage 类似（约 5MB）​​。

  • ​​同样仅支持字符串，同源策略限制​​。

  • 不同标签页之间​​不能共享​​（即使域名一样）。

  • ✅ 用途：

  • 适合存储​​当前会话的临时数据​​，比如表单填写中途的数据、当前页面状态等。

📌 示例：

// 存数据
sessionStorage.setItem('tempData', '12345');

// 取数据
const data = sessionStorage.getItem('tempData');

// 删除 / 清空 同 localStorage
sessionStorage.removeItem('tempData');
sessionStorage.clear();

4. ​​IndexedDB（索引数据库）​​

✅ 特点：

  • 是浏览器提供的​​低级、异步、事务型数据库​​，基于 ​​NoSQL（键值对或对象存储）​​。

  • ​​存储容量大（一般几十MB甚至更多）​​，适合存储大量结构化数据。

  • ​​支持索引、事务、查询等高级功能​​，类似小型数据库。

  • ​​异步 API（使用 Promise 或回调）​​，不会阻塞主线程。

  • ​​同源策略限制​​。

✅ 用途：

  • 适合存储​​大量结构化数据​​，如离线应用数据、用户生成的文件、复杂缓存等。

  • 比 LocalStorage 更强大，但​​使用较复杂​​。

📌 示例（简化，实际通常封装或使用库如 idb、Dexie.js）：

// 打开或创建数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('users')) {
    db.createObjectStore('users', { keyPath: 'id' });
  }
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Alice' });
};

5. ​​Cache API（Service Worker 缓存）​​

✅ 特点：

  • 主要用于​​离线缓存​​，和 ​​Service Worker​​ 配合使用。

  • 可以缓存​​请求和响应​​，实现离线访问（PWA 的关键技术之一）。

  • 存储的是网络请求资源，如 HTML、JS、CSS、图片等。

  • 一般不直接用来存普通业务数据。

✅ 用途：

  • 实现​​离线网页、渐进式 Web 应用（PWA）​​

  • 缓存 API 请求、静态资源，提升二次访问速度

✅ 二、扩展

0.关于localStorage的几个小tips

LocalStorage 能跨浏览器共享吗？​​

❌ 不能，LocalStorage 是浏览器级别的隔离，不同浏览器（Chrome/Firefox/Safari）之间无法共享

​​LocalStorage 能跨标签页共享吗？​​

✅ 可以，只要是在同一个浏览器、同一个源（协议+域名+端口）下的标签页，就能共享

​​LocalStorage 会过期吗？​​

❌ 不会自动过期，除非手动删除、调用 clear()，或用户清除浏览器数据

​​LocalStorage 和 Cookie 有什么区别？​​

容量、是否自动发送到服务器、生命周期、安全性等都不同（可展开对比表）

​​如何实现跨浏览器或跨设备的数据同步？​​

不能依赖 LocalStorage，一般要通过 后端数据库 + 用户登录态 + 前端同步机制（如登录后拉取用户配置）

1. ​​Cookie、LocalStorage、SessionStorage 的区别是什么？​​

特性

Cookie

LocalStorage

SessionStorage

​​容量​​

~4KB

~5~10MB

~5~10MB

​​生命周期​​

可设置过期时间，否则随浏览器关闭（但通常用于会话）

永久存储，除非手动删除

当前标签页关闭后自动清除

​​是否自动发送到服务器​​

✅ 每次 HTTP 请求都会带上（在 Cookie 头中）

❌ 仅在客户端

❌ 仅在客户端

​​作用域​​

可设置 Domain / Path，可跨标签页共享

同源下共享，跨标签页共享

同源下共享，但​​不同标签页不共享​​

​​数据类型​​

字符串

字符串（需手动 JSON 序列化）

字符串（需手动 JSON 序列化）

​​典型用途​​

身份验证（Session ID）、用户跟踪

用户偏好、缓存数据

当前页面临时数据

2. ​​Cookie 为什么不适合存大量数据？有什么安全问题？​​

  • ​​容量限制​​：每个 Cookie 一般不超过 4KB，且每个域名下的 Cookie 数量也有限制（约 20~50 个）。

  • ​​性能问题​​：每次 HTTP 请求都会携带 Cookie，如果 Cookie 太多或太大，会增加请求头大小，影响性能。

  • ​​安全风险​​：

    • ​​CSRF（跨站请求伪造）​​：攻击者诱导用户在已登录的网站上执行恶意操作。

    • ​​XSS（跨站脚本攻击）​​：如果网站有 XSS 漏洞，Cookie 可能被窃取（尤其是没有设置 HttpOnly的 Cookie）。

🔐 ​​安全相关属性​​：

  • HttpOnly：无法通过 JS 访问，防止 XSS 攻击窃取 Cookie。

  • Secure：只在 HTTPS 连接下传输。

  • SameSite：控制跨站时是否发送 Cookie，防止 CSRF。

3. ​​LocalStorage 和 SessionStorage 适合存储哪些数据？为什么不存储敏感信息？​​

  • ​​适合存储​​：用户主题、语言偏好、表单草稿、缓存的数据（如 JSON 配置）。

  • ​​不适合存储​​：用户的密码、Token（尤其长期有效的）、身份信息等敏感数据。

🔐 ​​原因​​：

  • ​​任何 JS 代码（包括恶意脚本、XSS 攻击）都能读取它们​​，没有 HttpOnly 保护。

  • 如果网站存在 XSS 漏洞，攻击者可以轻松通过 localStorage.getItem()获取你的数据。

4. ​​什么时候用 IndexedDB？和 LocalStorage 有什么区别？​​

特性

LocalStorage

IndexedDB

​​容量​​

较小（5~10MB）

更大（几十MB甚至更多）

​​数据类型​​

只能存字符串

可存对象、二进制、结构化数据

​​查询能力​​

无，只能按键存取

支持索引、事务、复杂查询

​​API​​

同步（简单易用）

异步（使用 Promise / 回调，较复杂）

​​用途​​

简单配置、偏好存储

大量数据、离线应用、复杂缓存

🔧 ​​什么时候用 IndexedDB？​​

  • 当你需要存储​​大量结构化数据​​（如离线博客文章、用户笔记、文件缓存等）。

  • 需要​​查询、排序、分页等能力​​，类似小型数据库。

5. ​​如何实现本地存储的数据加密？​​

  • ​​不要存储明文的敏感信息​​（如密码、token）。

  • 如果一定要存，可以对数据进行​​加密处理​​（如使用 AES、RSA 等加密算法，通过 crypto.subtle API）。

  • 但注意：​​密钥管理仍是难点​​，一旦 JS 被 XSS 攻击，密钥和数据都可能泄露。

6. ​​如何实现本地存储的自动过期？​​

LocalStorage 本身​​没有过期机制​​，但你可以手动实现，例如：

// 存储时带上时间戳
const data = { value: 'hello', expires: Date.now() + 1000 * 60 * 60 }; // 1小时后过期
localStorage.setItem('myData', JSON.stringify(data));

// 取的时候判断是否过期
const stored = JSON.parse(localStorage.getItem('myData'));
if (stored && stored.expires > Date.now()) {
  console.log(stored.value); // 未过期
} else {
  localStorage.removeItem('myData'); // 已过期，删除
}

7. ​​Service Worker 和 Cache API 怎么配合做离线缓存？​​

  • Service Worker 是运行在浏览器后台的脚本，可以拦截网络请求。

  • Cache API 可以缓存请求和响应，实现​​资源离线可用​​。

  • 一般流程：

    1. 注册 Service Worker

    2. 在 Service Worker 的 install事件中预缓存关键资源

    3. 在 fetch事件中优先返回缓存内容，若无缓存再请求网络

✅ 三、总结：JS 本地存储方式速查

方式

容量

持久性

是否自动发到服务器

数据类型

特点

适合场景

​​Cookie​​

~4KB

可设置过期

✅ 是（每次请求携带）

字符串

可设置 Domain/Path，支持 HttpOnly/Secure

身份验证、用户跟踪

​​LocalStorage​​

~5~10MB

永久（手动删）

❌ 否

字符串

同源共享，长期保存

用户偏好、缓存配置

​​SessionStorage​​

~5~10MB

标签页级（关闭即删）

❌ 否

字符串

仅当前标签页可用

当前页面临时数据

​​IndexedDB​​

很大（几十MB+）

永久

❌ 否

对象/二进制/结构化

异步、支持事务/索引/查询

大量结构化数据、离线应用

​​Cache API​​

大

永久

❌ 否

请求/响应

用于缓存网络资源

离线网页、PWA、资源缓存

✅ 四、一句话总结：

​​JavaScript 提供了多种本地存储方式，包括 Cookie（小数据、会话/身份相关）、LocalStorage（较大、永久、简单数据）、SessionStorage（会话级临时数据）、IndexedDB（大量结构化数据）和 Cache API（网络资源缓存），它们各有特点，适用于不同场景，面试中常会对比它们的区别、安全性及使用方式。​​

# javascript # 前端 # 开发语言
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

AI智能体：2025年普通人财富爆发的必经之路

avatar 2048 AI社区
cover

AI产品经理核心能力图谱：企业级大模型产品矩阵全解析（2025最新）

avatar 2048 AI社区
cover

C语言字符串与内存操作函数完全指南

avatar 2048 AI社区