localStorage 和 sessionStorage 是浏览器提供的两种客户端存储方式，
它们都属于 Web Storage API，用于在浏览器中存储键值对数据  
尽管它们的 API 和使用方式非常相似，但在生命周期、作用域和存储大小等方面有一些关键区别  
需要长期保存数据，使用 localStorage  
如果数据仅在当前会话中有效，使用 sessionStorage  

特性	   localStorage	   sessionStorage
生命周期	持久化，除非手动删除	临时，关闭标签页或窗口后清除
作用域	    同一浏览器同一源共享	仅限当前标签页或窗口
存储大小	通常 5MB	通常 5MB
适用场景	长期存储（如用户偏好、缓存）	临时存储（如表单数据、会话状态）
API	相同	相同




1. 生命周期
localStorage：
数据是持久化的，除非手动删除（通过代码或浏览器设置），否则数据会一直存在  
即使关闭浏览器或重启设备，数据也不会丢失  

sessionStorage：
数据是临时的，仅在当前会话期间有效  
当用户关闭浏览器标签页或窗口时，数据会被清除  
刷新页面不会清除 sessionStorage 数据  

2. 作用域
localStorage：

数据在同一浏览器的同一源（协议 + 域名 + 端口）下共享  
不同标签页或窗口之间可以共享 localStorage 数据  

sessionStorage：
数据的作用域仅限于当前标签页或窗口  
即使在同一浏览器中打开多个标签页，每个标签页的 sessionStorage 也是独立的  

3. 存储大小
localStorage 和 sessionStorage：
通常每个源的存储容量为 5MB（具体大小可能因浏览器而异）  
它们比 cookie（通常只有 4KB）更适合存储较大的数据  

4. API 使用
localStorage 和 sessionStorage 的 API 完全相同，常用的方法包括：

设置数据
localStorage.setItem('key', 'value'); // 存储到 localStorage
sessionStorage.setItem('key', 'value'); // 存储到 sessionStorage

获取数据
const value1 = localStorage.getItem('key'); // 从 localStorage 获取数据
const value2 = sessionStorage.getItem('key'); // 从 sessionStorage 获取数据

删除数据
localStorage.removeItem('key'); // 删除 localStorage 中的指定数据
sessionStorage.removeItem('key'); // 删除 sessionStorage 中的指定数据

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

获取键名
const key = localStorage.key(0); // 获取 localStorage 中第一个键名
const key = sessionStorage.key(0); // 获取 sessionStorage 中第一个键名


5. 适用场景
localStorage：
适合存储需要长期保存的数据，例如用户偏好设置、登录状态、缓存数据等  
示例：记住用户的主题设置（深色模式/浅色模式）  

sessionStorage：
适合存储临时数据，例如表单数据、当前会话的状态等  
示例：在单页应用（SPA）中存储当前页面的状态，防止页面刷新后数据丢失  

6. 注意事项
数据类型：localStorage 和 sessionStorage 只能存储字符串  
如果需要存储对象或数组，可以使用 JSON.stringify() 和 JSON.parse() 进行转换  

const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user)); // 存储对象
const storedUser = JSON.parse(localStorage.getItem('user')); // 读取对象

安全性：不要存储敏感信息（如密码、令牌等），因为它们可以被轻易访问  
同步操作：localStorage 和 sessionStorage 的操作是同步的，可能会阻塞主线程，尤其是在存储大量数据时  


7. 代码示例
使用 localStorage
// 存储数据
localStorage.setItem('theme', 'dark');

// 获取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出: dark

// 删除数据
localStorage.removeItem('theme');

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


使用 sessionStorage
// 存储数据
sessionStorage.setItem('formData', JSON.stringify({ name: 'Alice', age: 25 }));

// 获取数据
const formData = JSON.parse(sessionStorage.getItem('formData'));
console.log(formData); // 输出: { name: 'Alice', age: 25 }

// 删除数据
sessionStorage.removeItem('formData');

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