使用本地存储

本文讨论了什么是本地存储以及我们可以用来操作它的 JavaScript 方法。

我一直知道本地存储，但从未在任何项目中使用过它。因此，我决定开发一个笔记应用，因为我希望能够使用本地存储来存储和操作数据。我决定分享我在使用过程中学到的知识。首先，让我们了解一下什么是本地存储。

什么是本地存储？

本地存储是用户浏览器中可用的 Web 存储对象。它允许 JavaScript 浏览器直接在浏览器中存储和访问数据。您可以对本地存储中的数据执行基本的 CRUD 操作（创建、读取、更新和删除）。即使浏览器窗口关闭，本地存储中的数据仍然有效。

另一种 Web 存储形式是会话存储。它与本地存储类似。区别在于，会话存储中存储的数据在会话结束后（即浏览器窗口关闭后）会被清除。

本地存储方法

本地存储方法是帮助您操作本地存储的方法。即保存和访问存储在本地存储中的数据。这些方法包括：

1. 设置项目（）
2. 获取项目（）
3. 删除项目（）
4. 清除（）

让我们逐一讨论一下。

设置项目（）

我们使用此方法将新的数据项添加到本地存储对象，或更新现有值（如果数据已存在）。它接受两个参数：要创建或更新的数据项的键以及要存储的值。例如，如果我们想在本地存储中存储一个名称，我们将执行以下操作：

    localStorage.setItem('name', 'Sarah');

在上面的例子中，name是键，Sarah是值。

这是一个简单的例子。如果你想在本地存储中存储一些更复杂的东西，比如数组或对象，该怎么办？例如，将笔记应用的笔记存储在本地存储中。需要注意的是，本地存储将值存储为字符串。我们需要将数组或对象转换为字符串，然后再将其传递到本地存储。

我们可以使用该JSON.stringify()方法在将对象或数组传递给它之前将其转换为字符串setItem()。

    const notes = [
        {  
            title: 'A note',
            text: 'First Note'
        },
        {
            title: 'Another note',
            text: 'Second Note'
        }
    ]

    localStorage.setItem('notes', JSON.stringify(notes))

获取项目（）

此方法用于访问本地存储中的数据。它接受一个参数：要获取其值的项的键。它以字符串形式返回该值。

让我们获取存储在本地存储中的名称。

    const name = localStorage.getItem('name');
    console.log(name) // 'Sarah'

如果我们想获取存储在本地存储中的笔记怎么办？我们做同样的事情，将键传递给 getItem 方法。但是，为了将值作为数组获取，我们需要对其进行解析。否则，它会返回字符串。

    JSON.parse(localStorage.getItem('notes'))

删除项目（）

removeItem() 方法用于从本地存储中删除数据。它接收一个键，并从本地存储中删除与该键关联的数据项。如果本地存储中不存在该键，则不执行任何操作。

    localStorage.removeItem('name')

    console.log(localStorage.getItem('name')) //null

清除（）

该clear()方法清除本地存储中的所有数据。它不接收任何参数。

    localStorage.clear()

这些是用于从本地存储存储和检索数据的方法。接下来，让我们看看如何监听存储更改事件。

存储更改事件监听器

为了监听本地存储的变化，我们为存储添加了一个事件监听器。

    // When local storage changes, execute the doSomething function
    window.addEventListener('storage', doSomething())

当本地存储或会话在另一个文档的上下文中被修改时，会触发 storage 事件。这意味着 storage 事件不会在对本地存储进行更改的页面上触发。相反，如果同一页面在另一个标签页或窗口中打开，则会触发该事件。我们假设您的页面已经知道其上发生的所有更改。只有当更改发生在其他页面上时，才需要通知。

我在构建笔记应用时遇到了这个挑战。我尝试根据本地存储的变化来更新笔记的显示部分。然而，我注意到，当我添加新笔记时，它并没有更新笔记本身，而是更新了在另一个标签页中打开的同一页面。为了解决这个问题，我使用了状态对象。将笔记存储到本地存储后，我在此状态下存储或更新了新笔记。笔记的显示取决于状态的变化。

关于本地存储的重要注意事项

在我们结束之前还有最后一件事，我们应该了解有关本地存储的一些重要事项。

1. 所有主流浏览器的本地存储空间均限制为 5MB。
2. 它可以通过浏览器轻松访问，因此不应将其用于存储任何敏感数据或用户信息。
3. 本地存储上的操作是同步的，因此它们会一个接一个地执行。

想看看我开发的笔记应用吗？这里有应用的上线链接和Github 链接。如果您对本文或应用的任何部分有任何疑问，欢迎随时提问。

你可以在Instagram上关注我，我会定期发布我的科技之旅，也会分享我学到的东西的简短笔记。