【Web APIs】浏览器本地存储 ① ( window.sessionStorage 本地存储 | window.localStorage 本地存储 )

文章目录

• 一、浏览器本地存储
• • 1、核心概念
  • 2、核心特点
  • 3、本地存储核心类型
• [二、window.sessionStorage 本地存储](#二、window.sessionStorage 本地存储)
• • 1、核心概念
  • 2、适用场景
  • 3、代码示例
• [三、window.localStorage 本地存储](#三、window.localStorage 本地存储)
• • 1、核心概念
  • 2、适用场景
  • 3、代码示例

一、浏览器本地存储

---

1、核心概念

浏览器 本地存储 是 浏览器 内置的、允许网页在用户 本地设备 浏览器端 存储数据的技术 , 无需依赖服务器 , 能在客户端持久化保存少量数据 ;

浏览器 本地存储 解决了 传统 HTTP 协议 " 无状态 " 的问题 , 即 服务器 无法记住 用户上一次的操作 , 让 网页 能记住用户的 偏好、临时数据 等 , 提升用户体验 ;

本地存储 的 数据 直接保存在 用户的浏览器中 , 无需与服务器交互 , 相比传统的 Cookie ( 仅 4KB 左右 ) , 本地存储容量更大 , sessionStorage 约 5MB , localStorage 约 20MB ;

2、核心特点

浏览器 本地存储 核心特点 :

• 同源界面 : 本地存储 的数据 只有 同一域名、同一协议、同一端口 的页面 才能 访问对应存储的数据 ( 比如 a.com 无法访问 b.com 的本地存储 ) , 避免数据泄露 ;
• 存储格式 : 仅能 存储字符串 , 存数字、对象、数组 等数据 , 存储前 需先通过 JSON.stringify() 转换 , 读取时用 JSON.parse() 还原 ;
• 存储类型 : 分为 sessionStorage 和 localStorage 两种 , API 完全通用 ;
• 敏感数据 : 本地存储 的 数据 保存在用户设备上 , 可被手动修改 / 查看 , 不要存储密码、身份证、银行卡等敏感信息 ;
• 容量限制 : sessionStorage 容量 5M , localStorage 容量 20M , 超出会报错 , 不适合存大量数据 ;

3、本地存储核心类型

浏览器 本地存储 核心类型 : sessionStorage 本地存储 与 localStorage 本地存储 对比 ;

类型	存储有效期	数据共享范围	存储容量	核心特点
sessionStorage	仅当前浏览器标签页有效 , 关闭标签 / 浏览器则数据清空	仅当前标签页 , 不跨标签、不跨窗口	约 5MB	会话级临时存储 , 比如表单草稿
localStorage	永久存储 ( 除非手动删除 / 清除浏览器数据 )	同域名下的所有标签页 / 窗口共享	约 20MB	持久化存储 , 比如用户偏好设置

二、window.sessionStorage 本地存储

---

1、核心概念

window.sessionStorage 浏览器 本地存储 是 WebAPI 提供的 浏览器端 会话级 本地存储方案 , 挂载在 window 对象上 , 是 浏览器 本地存储 的 两大核心类型之一 ( 另一种是 localStorage ) ;

window.sessionStorage 的 核心设计目标是 为当前浏览器标签页提供临时、隔离的本地数据存储能力 , 数据 生命周期 严格绑定到 当前标签页 的会话 ;

window.sessionStorage 浏览器 本地存储 有如下特性 :

• 生命周期 : 仅 在当前标签页的会话中有效 ;
  • 刷新 / 重载当前标签页 → 数据保留 ;
  • 关闭标签页 / 浏览器 → 数据自动清除 ;
  • 重启浏览器重新打开同域名 → 数据丢失 ;
• 数据隔离性 : 同域名 的 不同标签页 完全隔离 , 如 : 打开两个知乎标签页 , A 标签的 sessionStorage 数据 , B 标签无法访问 ;
• 存储格式 : 仅支持字符串类型 , 存储对象 / 数组需用 JSON.stringify 序列化 , 读取时用 JSON.parse 反序列化 ;
• 容量限制 : 约 5MB , 不同浏览器略有差异 ;
• 同源限制 : 仅 协议、域名、端口 完全相同的页面 ( 同源 ) , 才能访问 对应标签页的 sessionStorage 数据 ;
• 可操作性 : 据 可 通过 JS 手动 增删改查 , 也可在 浏览器 开发者 工具 中直接 查看 / 修改 ;

2、适用场景

window.sessionStorage 浏览器 本地存储 适用场景 : 适合 存储 无需持久化、仅当前标签页 使用的数据 ;

• 临时表单数据 : 用户 填写长表单时 , 防止 刷新页面 数据丢失 ( 表单提交成功后可手动清除 ) ;
• 单标签页临时状态 : 比如 多步骤表单 的 步骤标记、页面临时筛选条件、播放进度 ( 仅当前标签生效 ) ;
• 敏感临时数据 : 一次性操作令牌、临时验证码 ( 关闭标签即失效 , 降低安全风险 ) ;
• 页面跳转临时参数 : 比如 从 A 页跳转到 B 页的临时传递数据 ( 无需存到 localStorage 长期占用 ) ;

3、代码示例

// 1. 存储数据
window.sessionStorage.setItem('step', '2'); // 多步骤表单的当前步骤
window.sessionStorage.setItem('filter', JSON.stringify({ status: 'pending', page: 1 })); // 临时筛选条件

// 2. 读取数据
const currentStep = window.sessionStorage.getItem('step');
const filter = JSON.parse(window.sessionStorage.getItem('filter') || '{}');
console.log(`当前步骤 : ${currentStep} , 筛选页 : ${filter.page}`); // 输出 : 当前步骤 : 2 , 筛选页 : 1

// 3. 查看数量和索引键名
console.log(`总数据量 : ${window.sessionStorage.length}`); // 输出 : 2
console.log(`索引0的键名 : ${window.sessionStorage.key(0)}`); // 输出 : step

// 4. 删除指定数据
window.sessionStorage.removeItem('step');

// 5. 清空所有数据 ( 表单提交成功后 ) 
// window.sessionStorage.clear();

三、window.localStorage 本地存储

---

1、核心概念

window.localStorage 浏览器 本地存储 是 WebAPI 提供的 浏览器端 持久化 本地存储方案 , 挂载在全局 window 对象上 , 是浏览器本地存储的两大核心类型之一 ( 另一种是 sessionStorage ) ;

localStorage 的核心设计目标是 为 同源页面 提供 长期、跨标签共享的本地数据存储能力 , 数据 不会 随浏览器 / 标签页 关闭而消失 ;

window.sessionStorage 浏览器 本地存储 有如下特性 :

• 生命周期 : 是 永久存储 数据 ;
  • 关闭标签页 / 浏览器、重启电脑 → 数据仍保留 ;
  • 仅在 手动清除 ( 代码 / 浏览器设置 ) 时才会消失 ;
• 数据共享范围 : 同域名 ( 协议、域名、端口完全相同 ) 下的 所有标签页 / 窗口共享 , 如 : A 标签存的数据 , B/C 标签都能读取 / 修改 ;
• 存储格式 : 仅 支持 字符串 类型 , 存储对象 / 数组需用 JSON.stringify 序列化 , 读取时用 JSON.parse 反序列化 ;
• 容量限制 : 约 20MB ;
• 同源限制 : 仅 同源页面 可访问 , 不同域名 无法读取 彼此的 localStorage 数据 ( 浏览器安全策略 ) ;
• 可操作性 : 数据可通过 JS 手动增删改查 , 也可在浏览器开发者工具 ( Application → Local Storage ) 中直接查看 / 修改 ;

2、适用场景

window.sessionStorage 浏览器 本地存储 适用场景 : 适合 存储 非敏感、需要长期保留、跨标签共享 的数据 ;

• 用户偏好设置 : 网站主题 ( 深色 / 浅色模式 ) 、语言选择、字体大小、页面布局偏好等 ;
• 非敏感状态缓存 : 登录状态标识 ( 注意 : 敏感 token 不建议纯本地存储 ) 、用户浏览记录、最近访问的内容 ;
• 静态数据缓存 : 高频使用的静态数据 ( 如下拉列表选项、地区列表 ) , 减少重复请求服务器 ;
• 跨标签页数据同步 : 比如 A 标签修改了主题设置 , B 标签打开时能直接读取最新的主题配置 ;

3、代码示例

// 1. 存储数据 ( 字符串直接存 , 对象/数组需序列化 ) 
window.localStorage.setItem('theme', 'dark'); // 存普通字符串
const userPref = { fontSize: '16px', lang: 'zh-CN' };
window.localStorage.setItem('userPref', JSON.stringify(userPref)); // 存对象

// 2. 读取数据 ( 对象需反序列化 , 加容错 ) 
const theme = window.localStorage.getItem('theme');
console.log(theme); // 输出 : dark

const prefStr = window.localStorage.getItem('userPref');
// 容错 : 若key不存在 ( prefStr为null )  , 返回空对象
const userPrefData = prefStr ? JSON.parse(prefStr) : {};
console.log(userPrefData.lang); // 输出 : zh-CN

// 3. 删除指定数据
window.localStorage.removeItem('theme');
console.log(window.localStorage.getItem('theme')); // 输出 : null

// 4. 清空所有localStorage数据 ( 谨慎使用！会删同域名下所有数据 ) 
// window.localStorage.clear();

---