JavaScript教程：深入理解LocalStorage和SessionStorage-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00459/article/details/148574894

JavaScript教程：深入理解LocalStorage和SessionStorage

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

前言

在现代Web开发中，客户端数据存储是一个非常重要的功能。本文将深入探讨JavaScript中的两种Web存储机制：localStorage和sessionStorage。这两种存储方式为开发者提供了在浏览器中存储键值对数据的能力，且比传统的cookie更加灵活和强大。

Web存储的基本概念

Web存储API提供了两种主要机制：

localStorage - 持久化存储，数据不会过期
sessionStorage - 会话级存储，数据仅在当前会话有效

与Cookie的主要区别

存储容量：Web存储通常提供至少5MB空间，远大于cookie的4KB限制
服务器交互：存储数据不会自动发送到服务器，减少不必要的网络流量
编程接口：完全通过JavaScript API操作，更加灵活
同源策略：存储按源(协议+域名+端口)隔离，安全性更好

localStorage详解

基本特性

localStorage提供了一种持久化存储方案，具有以下特点：

数据在浏览器关闭后仍然保留
同一源下的所有标签页和窗口共享同一个存储空间
存储容量通常为5MB或更大（取决于浏览器）

核心API

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

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

// 删除单个数据项
localStorage.removeItem('username');

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

// 获取存储中的键数量
const count = localStorage.length;

// 通过索引获取键名
const firstKey = localStorage.key(0);

对象式访问

除了标准API，还可以像普通对象一样访问localStorage：

// 设置值
localStorage.userAge = 30;

// 获取值
console.log(localStorage.userAge); // 30

// 删除值
delete localStorage.userAge;

但这种方式有一些限制，建议优先使用标准API。

存储复杂数据

localStorage只能存储字符串，但我们可以通过JSON来存储复杂对象：

// 存储对象
const user = {name: "John", age: 30};
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));

sessionStorage详解

sessionStorage与localStorage有相同的API，但有重要区别：

数据仅对当前浏览器标签页可见
数据在页面刷新后仍然保留
关闭标签页后数据会被清除
同一源的iframe可以共享sessionStorage

使用场景

sessionStorage适合存储临时会话数据，例如：

表单的多步骤填写过程
单次会话的临时设置
不希望跨标签页共享的敏感数据

遍历存储内容

Web存储对象不是可迭代的，但有几种方法可以遍历内容：

方法1：使用length和key()

for(let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

方法2：使用Object.keys()

const keys = Object.keys(localStorage);
keys.forEach(key => {
  console.log(`${key}: ${localStorage.getItem(key)}`);
});

Storage事件

当存储内容发生变化时，会触发storage事件，该事件具有以下属性：

key - 发生变化的键
oldValue - 旧值
newValue - 新值
url - 触发变化的页面URL
storageArea - 受影响的存储对象

事件监听示例

window.addEventListener('storage', event => {
  console.log(`存储变化于 ${event.url}`);
  console.log(`键 ${event.key} 从 ${event.oldValue} 变为 ${event.newValue}`);
});

重要：事件只在其他窗口触发，不会在当前修改数据的窗口触发。