localStorage 使用详解

1. localStorage 简介

localStorage 和 sessionStorage 一样，都是 HTML5 中最新引入的 Web 存储 API。

Web 存储 API，英文为 Web Storage API，通过它可以方便地在用户浏览器中存储键值对。

Web 存储 API 包括两个对象：

• localStorage
• sessionStorage

在 HTML5 之前，应用数据需要存放在 Cookie 中，每次请求时都需要携带它。相较而言，Web 存储 API 拥有以下优点：

• 不向服务器传输信息，更加安全。
• 比起 [[202009011658 Cookie 数量和大小的限制|Cookie 4kb 的容量限制]]，可以在本地存储大量数据，通常为 5mb。

除此之外，localStorage 还有以下特点：

• 永久存储数据，没有过期时间，除非使用 JavaScript、清除浏览器缓存或者本地数据才能够删除。
• 存储容量上限比 Cookie 和 SessionStorage 都要大。
• 遵循同源策略，来自同一个源的所有页面共享同样的数据。同源指的是域名和协议相同。
• 其中存储的键值对都是字符串，如果不是字符串将自动转换为字符串。

2. 调试 localStorage

• Ctrl - Shift - I 或者 F12
• 点击 Application
• 左侧点击 Storage 下面的 LocalStorage

3. localStorage 的 CRUD

为 localStorage 添加或修改数据有三种方式：

localStorage.age = 100
localStorage['age'] = 100
localStorage.setItem('age', 100)  // 推荐使用

在 localStorage 中查看数据也有三种方式：

localStorage.age
localStorage['age']
localStorage.getItem('age')  // 推荐使用

在 localStorage 中删除数据有三种方式：

delete localStorage.age
delete localStorage['age']
localStorage.removeItem('age')  // 推荐使用

清空整个 localStorage：

// 清空整个 localStorage
localStorage.clear()

4. 相关资料

• localStorage使用详解
• HTML Web Storage API
• MDN：Web Storage API