localStorage和sessionStorage

localStorage和sessionStorage

localStorage是指在用户浏览器中存储数据的方式，允许Web应用程序将少量的数据保存在用户设备上，便于页面之间、关闭浏览器后的数据持久化，他不会随着HTTP请求发送道服务器，减少带宽消耗，存储方式是键值对进行存储

localstorage:

存储数据：

使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中：

// 存储一个用户名
localStorage.setItem('username', 'Alice');

读取数据：

使用 localStorage.getItem(key) 方法可以获取存储在 localStorage 中的数据：

// 读取存储的用户名
const username = localStorage.getItem('username');
console.log(username);  // 输出：Alice

删除数据：

可以通过 localStorage.removeItem(key) 方法来删除指定的存储数据：

// 删除存储的用户名
localStorage.removeItem('username');

清空所有数据

如果需要清除 localStorage 中的所有数据，可以使用 localStorage.clear() 方法：

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

更新数据

localStorage 中的值是可以覆盖更新的，只需要再次调用 setItem 方法即可：

// 更新用户名为 Bob
localStorage.setItem('username', 'Bob');

存储对象和数组

localStorage 只能存储字符串，如果需要存储对象或数组，可以将它们序列化为 JSON 格式：

// 存储一个对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // 输出：Alice

localstorage

sessionstorage:

sessionStorage 的 API 与 localStorage 基本相同，唯一的区别在于其数据存储的生命周期。

1. 存储数据

// 存储一个 session 数据
sessionStorage.setItem('sessionData', 'This is session data');

2. 读取数据

// 读取 session 数据
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData);  // 输出：This is session data

3. 删除数据

// 删除指定 session 数据
sessionStorage.removeItem('sessionData');

4. 清空所有 session 数据

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

两者不同

localstorage和sessionstorage两者都是Web服务端，他们区别是在存储数据的生命周期上：

相同点：

localstorage和sessionstorage两者都是Web服务端API的一部分，用于浏览器中存储数据，存储的数据都是字符串

都受同源策略限制，只能在相同的协议、域名和端口下访问数据

不同点：

localstorage在同源的所有标签页和窗口中共享，session进项与当前标签页，即使是同源的其他标签也无法访问。

localstorage数据发生变动时，可以在其他窗口检测到，但是sessionstorage不可以监听到，

localstorage：数据持久化程度高，用户关闭浏览器后，数据依旧会被保留，除非手动删除，数据一直可以存在，适用于长期保存

sessionstorage:数据仅在浏览器会话期间有效，关闭页面或者标签页，数据会被删除，适用于存储临时性数据，表单状态之间传递数据