如何在 localStorage 中的 JavaScript 中设置项目和获取项目

在前端开发中，有时候我们需要在本地存储一些数据，以便用户下次访问页面时能够快速读取。这时候就可以使用 localStorage 来实现。

什么是 localStorage？

localStorage 是 HTML5 中新增的一项 Web 存储 API，它允许我们在浏览器中存储键值对（Key-Value Pair），并且可以跨页面和浏览器窗口访问。

如何设置项目？

要在 localStorage 中设置项目（也就是存储数据），可以使用 setItem 方法，它接受两个参数：键和值。例如，存储一个名为 username，值为 john 的项目可以使用以下代码：

localStorage.setItem('username', 'john');

这会在浏览器中创建一个名为 username 的键，对应的值为 john。

如何获取项目？

要从 localStorage 中获取项目，可以使用 getItem 方法，并传递要获取的键名称。例如，获取名为 username 的值可以使用以下代码：

const username = localStorage.getItem('username');

如果 localStorage 中不存在该键，则 getItem 方法将返回 null。

如何更新项目？

要更新 localStorage 中的项目，可以使用 setItem 方法，与设置新项目一样。例如，如果要将 username 的值从 john 更新为 jane，可以使用以下代码：

localStorage.setItem('username', 'jane');

这会更新名为 username 的键对应的值为 jane。

如何删除项目？

要从 localStorage 中删除项目，可以使用 removeItem 方法并传递要删除的键名称。例如，删除名为 username 的项目可以使用以下代码：

localStorage.removeItem('username');

这会从浏览器中删除键为 username 的项目。

如何清空项目？

要从 localStorage 中删除所有项目，可以使用 clear 方法。例如，清空 localStorage 可以使用以下代码：

localStorage.clear();

这会从浏览器中删除所有的键值对。

总结

localStorage 是一个非常有用的 Web 存储 API，我们可以使用它存储和读取键值对，并且还可以跨页面和浏览器窗口访问。通过 setItem、getItem、removeItem 和 clear 这些方法，我们可以轻松地管理 localStorage 中的项目。