在前端开发中，本地存储是实现客户端数据持久化或临时缓存的核心技术之一，可避免频繁与服务器交互，提升用户体验。本文系统梳理两种常用本地存储方案 ------localStorage与sessionStorage的特性、用法及注意事项。
localStorage：持久化本地存储
核心特性
存储位置：数据存储于用户浏览器的本地磁盘，而非内存，具备持久化特性。
生命周期：数据默认永久保留，仅通过代码删除或用户手动清除浏览器缓存时才会失效（关闭浏览器、重启设备不影响数据）。
存储格式：采用键值对（key-value）结构，且键和值均需为字符串类型（非字符串数据会被自动转换为字符串存储）。
作用域：同一浏览器的同一域名下，所有页面共享localStorage数据；不同域名或不同浏览器间无法跨域访问。
基础操作（CRUD）
存储 / 修改数据
通过localStorage.setItem(key, value)方法实现，若key不存在则为"新增"，若key已存在则为"覆盖修改"。
语法示例：
javascript
复制代码
// 新增数据：key为'age'，value为'18'
localStorage.setItem('age', '18');
// 修改数据：覆盖key为'age'的原有值，更新为'20'
localStorage.setItem('age', '20');
获取数据
通过localStorage.getItem(key)方法获取指定key对应的value，若key不存在则返回null。
语法示例：
javascript
复制代码
const age = localStorage.getItem('age');
console.log(age); // 输出结果：'20'（字符串类型）
删除指定数据
通过localStorage.removeItem(key)方法删除指定key对应的键值对。
语法示例：
javascript
复制代码
localStorage.removeItem('age');
console.log(localStorage.getItem('age')); // 输出结果：null
清空所有数据
通过localStorage.clear()方法清空当前域名下所有数据。
语法示例：
javascript
复制代码
localStorage.clear();
sessionStorage：临时会话存储
核心特性
存储位置：数据存储于浏览器内存，属于临时缓存。
生命周期：数据仅在当前浏览器窗口（或标签页）的会话周期内有效，简单来说就是关闭窗口之后就会消失
存储格式：与localStorage一致，键和值均需为字符串类型。
作用域：仅在当前浏览器窗口（或标签页）内有效。
基础操作
API与localStorage完全一致，仅生命周期和作用域不同。
语法示例：
javascript
复制代码
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
sessionStorage.removeItem('token');
sessionStorage.clear();
关键注意事项：复杂数据类型的存储处理
问题场景
直接存储对象、数组等复杂数据类型会导致数据格式异常（如转换为"[object Object]"）。
错误示例：
javascript
复制代码
const user = { uname: 'pink', age: 18 };
localStorage.setItem('user', user); // 存储异常
console.log(localStorage.getItem('user')); // 输出："[object Object]"
解决方案：JSON序列化与反序列化（stringify和parse）
存储复杂数据
javascript
复制代码
const userStr = JSON.stringify(user);
localStorage.setItem('user', userStr);
获取复杂数据
javascript
复制代码
const userStr = localStorage.getItem('user');
const userObj = JSON.parse(userStr);
console.log(userObj.uname); // 输出：'pink'
核心差异对比
对比
localStorage
sessionStorage
生命周期
持久化（手动删除才失效）
会话级（窗口关闭自动失效）
存储位置
浏览器本地磁盘
浏览器内存
跨窗口共享
同一域名下共享
仅当前窗口有效
应用场景
用户偏好设置
临时表单数据、会话级Token
使用建议
长期数据用localStorage，临时数据用sessionStorage。
复制代码