526互联

localStorage 与 sessionStorage 的区别

发布时间 2023-04-28 15:47:45作者: yjxQWQ

localStorage 与 sessionStorage 的区别

如果需要存储长期数据并且在不同的浏览器选项卡或窗口中共享，则应使用 localStorage。如果需要存储会话数据并且仅在同一浏览器选项卡或窗口中共享，则应使用 sessionStorage。

1.存储数据

// 使用 localStorage 存储数据
localStorage.setItem('myKey', 'myValue');

// 使用 sessionStorage 存储数据
sessionStorage.setItem('myKey', 'myValue');

2.获取数据

// 从 localStorage 获取数据
const myValue = localStorage.getItem('myKey');
console.log(myValue); // 输出: "myValue"

// 从 sessionStorage 获取数据
const myValue = sessionStorage.getItem('myKey');
console.log(myValue); // 输出: "myValue"

3.移除数据

// 从 localStorage 移除数据
localStorage.removeItem('myKey');

// 从 sessionStorage 移除数据
sessionStorage.removeItem('myKey');

4.清空数据

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

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

存储在 localStorage 或 sessionStorage 中的数据都是以字符串形式存储的。如果要存储其他类型的数据，需要先将其转换为字符串。在获取数据时，也需要将字符串转换回原始类型。