JavaScript localStorage 完全指南：API 使用、CRUD 操作与常见陷阱

如果你是一名开发人员，想要进入 .NET 的世界，你需要了解可能的技术选项。由于 .NET Framework 是 .NET 生态系统中广泛使用的技术，你可以利用它构建多种应用程序。然而，近年来出现了 .NET Core 和 .NET Standard library 等新组件。我们需要评估是否可以在项目或构建过程中使用这些新技术。

localStorage 对象是 Web 开发中应用最为广泛的对象之一。它为在用户计算机上本地存储键值对提供了一种简单且高效的解决方案。

大多数 Web 开发人员偏好 localStorage API，原因在于其语法简洁，且能够存储高达 5MB 的数据量。

此外，所有主流浏览器的最新版本均支持 Web Storage API，其中包括 localStorage 和 sessionStorage。唯一不支持 Web Storage API 的浏览器是 Opera Mini。

你可以通过打开 Chrome DevTools 快速验证你的浏览器是否支持 Web Storage API。导航至“控制台”，键入以下代码片段，并按下回车键执行。

typeof(Storage)

如果返回结果为 undefined，则表明你的浏览器不支持 Web Storage API。若浏览器支持该功能，你将看到返回值为“function”。

本文主要探讨以下问题：

• localStorage 是什么？
• localStorage 和 sessionStorage 之间有什么区别？
• 如何使用 localStorage API 执行 CRUD 操作？
• 常见的本地存储陷阱有哪些？
• localStorage 存在哪些限制？

localStorage 是什么？

正如前文所述，localStorage 对象是浏览器原生支持的 Web Storage API 的一部分。这是一种简单且高效的键/值存储解决方案。

对于 Web 开发人员而言，使用 localStorage 对象的最大优势在于支持离线存储。更重要的是，即使用户关闭浏览器或重启计算机，数据也不会丢失。即使在计算机重新启动后，网站仍可通过 localStorage API 读取存储在用户计算机上的本地数据。

该解决方案为 Web 开发人员提供了几个有趣的应用场景。

• 离线存储网站的用户设置
• 保留用户搜索历史
• 保留购物车中的物品

接下来，让我们比较 localStorage 和 sessionStorage。

localStorage 和 sessionStorage 之间有什么区别？

虽然这两个 API 在外观上相似，但它们的执行机制存在细微差异。

localStorage API 用于本地存储数据。因此，当用户刷新标签页、关闭浏览器或重启计算机时，本地保存的数据不会丢失。它是长期存储基础数据的理想解决方案。

sessionStorage API 在页面刷新后仍然有效，但仅能在相同的标签页中工作。

简而言之，在为应用程序选择存储解决方案时需格外注意。例如，最佳实践是将用户设置信息存储在 localStorage 中。相反，sessionStorage 更适合为特定会话存储数据。

如何使用 localStorage API 执行 CRUD 操作

本节将向你展示如何利用 localStorage API 进行添加、读取、更新或删除操作。在此基础上，我将向你介绍一个清除特定页面 localStorage 的技巧。

首先，让我们在 localStorage 对象中创建一个新的键值对。setItem 函数接受一个键及其对应的值。为密钥选择一个合适的名称，因为你可能稍后使用该密钥名称进行检索。

localStorage.setItem(‘my-key', ‘some-value')

现在让我们再次检索新创建的对象。

let item = localStorage.getItem(‘my-key')

console.log(item) // Output: “some-value”

这非常简单。让我们继续更新 my-key 的值。请注意，我们使用相同的 setItem 函数来覆盖其原有值。

localStorage.setItem(‘my-key', ‘new-value')

最后，让我们删除这个键。removeItem 函数接受一个参数，即想要删除的键名。

localStorage.removeItem(‘my-key')

为了确保我们已经删除了所有键，让我们使用 clear 函数来清除存储在 localStorage 中应用程序的所有内容。

localStorage.clear()

现在，我们已经为更高级的 localStorage 操作做好了准备。

高级 localStorage 操作：遍历

让我们看看用于遍历 localStorage 对象和查找键的方法。

第一种方法使用了最直接的 for 循环。请注意，我们可以直接在 localStorage 对象上使用 length 属性。

for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i)
 console.log(`${key} with value ${localStorage.getItem(key)}`)
}

我们也可以直接使用 key 方法检索相应的键。

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i)
 console.log(key)
}

接下来，让我们看看在使用 localStorage API 时要避免的陷阱。

localStorage 常见的陷阱

让我们看一下与 localStorage API 交互时最常见的两个陷阱。

首先，尝试存储一个 JSON 对象。localStorage API 被设计为键-值对存储，因此该值只接受字符串，不接受对象。然而，这并不意味着我们不能存储对象。我们需要将其序列化为字符串。

const dinner = { apples: 5, oranges: 1 }
localStorage.setItem(‘my-dinner', JSON.stringify(dinner))

当读取序列化的对象时，我们需要再次将其解析为 JSON。

let dinner = JSON.parse(localStorage.getItem(‘my-dinner'))

其次，尝试存储一个布尔值。同样，localStorage API 仅支持字符串。存储布尔值时需小心。

幸运的是，该解决方案与存储 JSON 对象类似。当存储布尔值时，setItem 函数会将其转换为字符串，例如“true”。要读取带有字符串的布尔值，我们可以使用 JSON.parse 方法将其转换回布尔值。

let myBool = JSON.parse(localStorage.getItem(‘my-bool'))

localStorage 的限制

这里是对 localStorage 限制的快速回顾。

• 基于字符串的存储
• 大多数浏览器的存储空间有限，最多可达 5 MB
• 尝试存储巨大字符串时会阻塞主线程。确保不要同时更新相同的键，因为这会导致问题。在这种情况下，最好寻找替代存储解决方案，因为 localStorage API 并非为此目的而设计。
• Web worker 或 web service 无法访问 localStorage
• 没有内置的安全机制。因此，我们不建议存储密码或与身份验证相关的数据。任何可以访问用户浏览器的人都可以打开一个页面并读取存储在 localStorage 中的信息，这就像图书馆中公共可用的计算机一样。

到此这篇关于如何在 JavaScript 中使用 localStorage 的文章就介绍到这了，更多相关如何在 JavaScript 中使用 localStorage 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！