Javascript 本地存储 - 初学者指南

在进行任何解释之前，我们需要了解网站和应用程序之间的区别server side storage。client side storage服务器端意味着我们使用数据库将数据存储在服务器上，而客户端则由 JavaScript API 组成，允许你将数据存储在客户端（浏览器中）。

什么是本地存储？
简单来说，它local storage可以比作数据库，只不过它位于浏览器中，而不是服务器上。它本质上是一个巨大的 JavaScript 对象，我们可以在其中以key-value对的形式存储数据。我们不仅可以存储数据，还可以删除或检索数据（完整的浏览器列表可在此处localStorage找到）。存储在 中的数据永远不会离开您的计算机（不会像 那样被发送回服务器，这将在以后的文章中讨论），并且根据浏览器的不同，您最多可以存储 5MB 的数据。localStoragecookies

从技术角度来说，

接口的 localStorage 只读属性window允许您访问来源Storage对象Document's；
存储的数据在浏览器会话之间保存。

为什么要使用它？
本地存储允许我们在浏览器中缓存（存储）一些应用程序数据，以供日后使用。因此，如果我们想要提高应用程序的运行速度，它就非常有用（因为数据完全存储在客户端，因此每次请求或响应时，数据不会在客户端和服务器之间传输）。例如，这样一来，我们可以允许用户继续他们上次中断的游戏，或者根据他们之前访问我们网站的情况，为他们提供相关内容。

我主要在构建静态网站时使用它。由于我不需要任何后端语言或逻辑来在浏览器中存储数据，所以我的网页可以独立于任何 Web 服务器运行。

存储有两种类型，local和session，但现在您应该记住的唯一区别是local storage没有到期日期（意味着数据将保留在那里，直到我们手动将其删除），而session一旦我们关闭浏览器（会话），就会被清除。

Chrome在本文中，我将使用浏览器进行操作，但通常情况下，访问任何浏览器的 localStorage 的方法都非常相似。我们打开控制台（F12），导航到Application选项卡，然后在左侧菜单中，我们将在选项卡Local storage下方看到Storage类似以下内容：

如果我们展开Local storage下拉菜单，我们将看到这个视图：

我们有两列，Key和Value，通常它们都填充了数据，我在截屏之前刚刚将这些数据删除了。

我们可以storage通过一些特定的方法来访问这个对象并填充这两列。记住，local storageisread-only表示我们可以在其中添加、读取和删除数据，但不能修改它（最多只能通过使用相同的键和我们想要存储的新值重新添加到存储中来覆盖键的先前值）。访问时，我们应该使用以下语法：

window.localStorage 
//or 
localStorage

如果我们想添加一些东西，我们可以这样做：

localStorage.setItem("key", "value");

为了访问一个值，我们这样写：

localStorage.getItem("key");

最后，我们可以删除一个特定的值：

localStorage.removeItem("key");

或者我们可以清除整个本地存储：

localStorage.clear();

现在，我们来尝试实际编写一些代码。为了简单起见，我将使用控制台。让我们添加一个项目：

window.localStorage.setItem("city", "Toronto");

现在，本地存储如下所示：

需要记住的一点是，它localStorage只能存储字符串。要存储对象，我们必须先使用 JSON.stringify() 方法将它们转换为字符串。然后，从 localStorage 中检索字符串后，使用 JSON.parse() 将字符串转换回对象。

让我们添加更多值，使用不同类型的数据作为键和值：

localStorage.setItem(0, "number");

const person = {name: "Alan", age: 32};
JSON.stringify(person); // returns "{\"name\":\"Alan\",\"age\":32}"
localStorage.setItem("person","{\"name\":\"Alan\",\"age\":32}");

现在本地存储将如下所示：

我们可以添加任意数量的键值对，只要数据不超过5MB。现在让我们检索键的值person，将其转换为对象并将其打印到控制台：

const result = localStorage.getItem("person");
console.log(result); // returns {"name":"Alan","age":32}
const objectResult = JSON.parse(result);
console.log(objectResult);// returns {name: "Alan", age: 32}

最后，让我们只删除一项，然后清除全部localStorage：

localStorage.removeItem("0");

localStorage.clear();

关于本地存储需要记住的事项

• 它是特定于选项卡的，这意味着我们打开的每个浏览器选项卡中都会有不同的数据localStorage（如果选项卡具有相同的来源（共享相同的域），则不适用）
• 某些浏览器在使用时incognito mode不允许在localStorage
• 它是同步的，这意味着每个操作将一个接一个地执行（这可能适用于小型项目，但它会影响更复杂项目的运行时间）
• 它只能存储数据字符串数据（这对于小型项目来说很好，但serialize在复杂的项目中数据可能会很麻烦）

要记住的非常重要的事情是，
在任何情况下都不应使用本地存储来存储敏感信息（例如密码或个人信息），因为可以从页面上的任何位置访问其中的数据（它没有真正的保护并且容易受到跨站点脚本的攻击）。

图片来源：Pexels 上的 ThisIsEngineering/@thisisengineering