SessionStorage和loacalStorage区别

一、SessionStorage

1.生命周期

SessionStorage中存储的数据在当前会话期间有效，即当页面关闭时数据将被清除。

2.作用域

SessionStorage中的数据仅在当前标签页或窗口中有效，不同标签页或窗口之间无法共享数据。

3.存储容量

SessionStorage的存储容量通常比localStorage小，因为它只在当前会话期间有效。

// 使用SessionStorage
// 存储数据
sessionStorage.setItem('username', 'Alice');
// 获取数据
const username = sessionStorage.getItem('username');
console.log(username); // 输出：Alice
// 删除数据
sessionStorage.removeItem('username');

二、localStorage

1.生命周期

localStorage中存储的数据没有过期时间，除非手动清除或浏览器缓存被清除，否则数据将一直保留。

2.作用域

localStorage中的数据在同一域名下的所有页面之间都是共享的，不同页面间可以共享数据。

3.存储容量

localStorage的存储容量相对较大，一般为5MB左右，可以存储较多的数据。

// 使用localStorage
// 存储数据
localStorage.setItem('theme', 'light');
// 获取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出：light
// 删除数据
localStorage.removeItem('theme');