如何在 HTML 中编写 LocalStorage - JavaScript

简介

LocalStorage 是一个 Web API, 可以在客户端浏览器中存储和获取数据。它允许我们将数据存储在用户的本地浏览器上，并在用户请求时获取数据，而不必每次都从服务器获取数据。在本文中，我们将了解如何在 HTML 中使用 JavaScript 编写 LocalStorage。

使用 LocalStorage

存储数据

创建或更新一个localStorage项，可以使用setItem方法。这个方法接受两个参数：键和值。键必须是一个字符串，值可以是任何数据类型的 JavaScript 对象（字符串，数字，布尔值，对象等）。

// 将一个字符串保存在 LocalStorage 中
localStorage.setItem('name', 'Alice');

// 将一个对象保存在 LocalStorage 中
const user = {
  name: 'Bob',
  age: 34,
  gender: 'male'
};
localStorage.setItem('user', JSON.stringify(user));

请记住：LocalStorage 只支持字符串作为值。如果您要保存一个对象，您需要将对象转换为字符串(JSON.parse方法)，并在检索时再次将其转换回来。

获取数据

要获取 localStorage 中的数据，可以使用getItem方法。这个方法接受一个参数：键，并返回存储在该键下的值。请注意，如果键不存在，此方法将返回null。

// 获取 LocalStorage 中的一个字符串
const name = localStorage.getItem('name'); // 'Alice'

// 获取 LocalStorage 中的一个对象
const userJSON = localStorage.getItem('user'); // '{"name":"Bob","age":34,"gender":"male"}'
const user = JSON.parse(userJSON);

更新数据

如果您需要更新 LocalStorage 中的数据，只需要再次使用setItem。更新一个现有的 localStorage 键将覆盖该键的值。并且，您不需要在更新之前删除旧的 localStorage 项。

// 更新 LocalStorage 中的一个字符串
localStorage.setItem('name', 'Caroline');

// 更新 LocalStorage 中的一个对象
const updatedUser = {
  name: 'Bob',
  age: 35,
  gender: 'male'
}
localStorage.setItem('user', JSON.stringify(updatedUser));

删除数据

要删除 LocalStorage 中的数据，请使用removeItem方法。这个方法接受一个参数：键，并删除与该键关联的项。

// 删除 LocalStorage 中的一个字符串
localStorage.removeItem('name');

// 删除 LocalStorage 中的一个对象
localStorage.removeItem('user');

清空数据

您可以使用 clear 方法来清除 localStorage 中的所有数据。

// 清空 LocalStorage
localStorage.clear();

总结

在本文中，我们了解了如何在 HTML 中使用 JavaScript 来使用 LocalStorage。我们学习了如何存储数据，获取数据，更新数据，删除数据以及清除 localStorage 的存储。使用 LocalStorage 可以为您的 Web 应用程序提供快速的本地数据存储选项，而无需每次都从服务器获取数据。