JavaScript 本地存储简介

本文将介绍如何使用 JavaScript 的 window.localStorage 为一个简单的网站创建深色主题切换功能。我们将探讨如何从本地存储中设置和获取项目。

要点总结：

6:42 - `localStorage.setItem()` 方法接受两个参数，第一个是键（Key），第二个是值（Value）。键和值都必须是字符串类型。您可以在浏览器的开发者工具的“应用程序”选项卡下查看这些存储的值。

9:10 - 要从本地存储读取数据，我们使用 `localStorage.getItem()` 方法，并传入最初存储的键值。这样就能得到与该键值对应的字符串。

11:18 - 从本地存储读取数据时，最好先检查是否返回了数据，然后再继续执行代码。

12:50 - 如果你在 React 中使用本地存储，你可以存储一个 React 状态对象。你必须先使用 JSON.stringify() 将要存储的对象转换为字符串，因为本地存储只支持字符串。

14:35 - 从本地存储读取数据并获取 JSON 字符串时，需要使用 JSON.parse() 解析该值并将其转换回对象。

15:50 - 在 React 中使用时，一种方法是在执行 `this.setState()` 之后立即使用 `setItem`，并将对象字符串化后再传递给 `localStorage.setItem()`。之后，你可以在 `componentDidMount` 和 `this.setState()` 中通过 `getItem` 从本地存储中检索 React 状态对象。

如果你喜欢这个视频，请订阅频道以示支持！

您还可以访问Code Bushi获取更多关于 Web 开发的资源！