前端本地存储技术笔记：localStorage 与 sessionStorage 详解

在前端开发中，本地存储是实现客户端数据持久化或临时缓存的核心技术之一，可避免频繁与服务器交互，提升用户体验。本文系统梳理两种常用本地存储方案 ------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。

复制代码