HTML | DOM 窗口 localStorage 属性

简介

localStorage 属性允许在浏览器关闭后，依旧将数据存储在本地。

语法

• 存储数据：localStorage.setItem(key, value)
• 获取数据：localStorage.getItem(key)
• 删除数据：localStorage.removeItem(key)
• 清空数据：localStorage.clear()

其中，key 和 value 都为字符串类型。

使用方法

1. 存储数据

localStorage.setItem('username', 'Tom');
localStorage.setItem('age', '25');

2. 获取数据

// 获取单个数据
const username = localStorage.getItem('username');
console.log(username);

// 获取所有数据
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(key, value);
}

3. 删除数据

localStorage.removeItem('username');

4. 清空数据

localStorage.clear();

注意事项

• localStorage 存储的数据只能是字符串类型，若需要存储其他类型的数据，需进行转换。
• localStorage 存储的数据会一直存在，直到通过代码删除或用户清空浏览器缓存。
• 不同的浏览器对 localStorage 的存储容量有限制，一般为 5MB 左右。
• 与 sessionStorage 不同的是，localStorage 的数据是共享的，即不同的窗口和标签页共用同一套 localStorage 数据。

参考链接

• localStorage - JavaScript | MDN