localstorage或sessionstorage
时间: 2025-06-07 20:22:20 浏览: 15
### localStorage 与 sessionStorage 的区别
#### 存储生命周期
`localStorage` 中的数据没有过期时间,除非主动删除数据或清除浏览器缓存,否则这些数据会在浏览器中永久保存[^1]。相比之下,`sessionStorage` 只在当前会话期间有效;当页面会话结束(即关闭浏览器标签页),所存储的数据将会被自动清除。
#### 数据共享范围
对于 `localStorage` 而言,在同一个域名下的不同窗口或标签之间可以实现数据共享,这意味着在一个页面设置的数据可以在同一域内的其他页面访问到[^2]。然而,`sessionStorage` 则仅限于单一会话内使用,即使在同一域名下打开新的浏览器标签也无法获取之前设定的信息。
#### 实际应用案例
由于其持久性的特点,`localStorage` 更适合用于长期保存用户偏好设置、主题模式选择等功能需求上。而 `sessionStorage` 主要应用于临时性操作记录,比如购物车商品列表或是表单填写进度保留等场景,因为这类信息通常不需要跨多个浏览会话保持一致。
### 使用教程
#### 设置项
无论是哪种类型的存储对象都可以通过简单的键值对形式来增加新条目:
```javascript
// 对于 localStorage
localStorage.setItem('key', 'value');
// 对于 sessionStorage
sessionStorage.setItem('key', 'value');
```
#### 获取项
读取已有的数据同样简单明了:
```javascript
const valueFromLocalStorage = localStorage.getItem('key');
const valueFromSessionStorage = sessionStorage.getItem('key');
```
#### 删除特定项
如果想要移除某个具体的项目,则可调用如下方法:
```javascript
localStorage.removeItem('key'); // 移除 localStorage 中指定 key 的数据
sessionStorage.removeItem('key'); // 移除 sessionStorage 中指定 key 的数据
```
#### 清空全部内容
最后还有清零整个存储空间的操作选项:
```javascript
localStorage.clear(); // 清理掉所有的 localStorage 条目
sessionStorage.clear(); // 清理掉所有的 sessionStorage 条目
```
阅读全文
相关推荐


















