客户端存储sessionStorage、localStorage详解

1. Web Storage 简介

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数据时使用cookie的问题。

Web Storage 的第 2 版定义了两个对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。

这两者的主要区别是：

• sessionStorage对象只存储会话数据，这意味着数据只会存储到浏览器关闭。存储在sessionStorage中的数据不受页面刷新影响，可以在浏览器崩溃 并重启后恢复。
• 存储在localStorage中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

	sessionStorage	localStorage
存储时效	浏览器关闭后清除	永久存储，直到手动清除
刷新页面数据是否丢失	否	否

2. sessionStorage

存储在sessionStorage对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。

常用方法

（1）存储数据

// 使用方法
sessionStorage.setItem('name', 'Jack');
// 使用属性
sessionStorage.age = '18';

（2）获取数据

// 使用方法
const name = sessionStorage.getItem('name');
// 使用属性
const age = sessionStorage.age;
console.log(name, age); // Jack 18

（3）取得给定数值位置的名称

const key = sessionStorage.key(0);
console.log(key); // name

得到的是键值对中的键。

（4）删除

sessionStorage.removeItem('name'); // 删除名称为name的数据
delete sessionStorage.name; // 用delete删除
sessionStorage.clear(); // 清空所有数据

（4）遍历

sessionStorage.setItem('name', 'Jack');
sessionStorage.age = '18';
sessionStorage.weight = '60';

const res = [];
for (let i = 0; i < sessionStorage.length; i++) {
    // 先通过key()取得名称
    const key = sessionStorage.key(i);
    // 再通过名称遍历sessionStorage
    const val = sessionStorage.getItem(key);
    res.push(val);
}
console.log(res); // ["Jack", "18", "60"]

3. localStorage

要访问同一个localStorage对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

相关方法与sessionStorage相同：

• 存数据

  localStorage.setItem(key, value)

• 取数据

  localStorage.getItem(key)

• 取得名称

  localStorage.key(index)

• 删除

  localStorage.removeItem(key)

  localStorage.clear()

4. 存储事件

对于sessionStorage和localStorage上的任何更改都会触发storage事件，但storage事件不会区分这两者。

这个事件的事件对象有如下 4 个属性：

• domain：存储变化对应的域
• key：被设置或删除的键
• newValue：键被设置的新值，若键被删除则为null
• oldValue：键变化之前的值

5. 限制

不同浏览器给localStorage和sessionStorage设置了不同的空间限制，但大多数会限制为每个源5MB。

sessionStorage和localStorage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。同样，获得数据时，只能得到字符串。

想要获取对象时，可以使用JSON.parse()方法将字符串转化为对象格式：

JSON.parse(localStorage.getItem('xxxxx')).content.email;

---

欢迎在我的博客上访问：
https://lzxjack.top/