Javascript LocalStorage 参考

简介

Javascript LocalStorage 提供了一种在浏览器中存储数据的方式，该数据是以键值对的形式存储在客户端计算机的本地存储中。这意味着即使用户离开网站，数据仍然可以保持在本地存储中。 LocalStorage 允许您存储字符串作为值，并使用键来访问值。 在这个参考中，我们将向您介绍如何使用 LocalStorage 中的数据，并提供一些有用的代码片段。

LocalStorage 属性

使用 LocalStorage 属性可以访问本地存储中存储的数据。

方法列表

下面是 LocalStorage 可以使用的方法列表：

• setItem(key, value): 将键值对存储在 LocalStorage 中。如果已经存在以该键存储的数据，则它将被覆盖。
• getItem(key): 返回与指定键关联的值，如果键不存在，则返回 null。
• removeItem(key): 从 LocalStorage 中删除指定键的数据。
• clear(): 从 LocalStorage 中删除所有数据。
• key(index): 返回存储在 LocalStorage 中的键名称。

使用 LocalStorage

以下是 JavaScript 中使用 LocalStorage 的简单示例。

// 将数据存储在 LocalStorage 中
localStorage.setItem('username', 'TestUser');

// 从 LocalStorage 中获取数据
const username = localStorage.getItem('username');

// 从 LocalStorage 中删除数据
localStorage.removeItem('username');

// 从 LocalStorage 中删除所有数据
localStorage.clear();

数据类型

LocalStorage 只能存储字符串作为值。当您需要存储对象或数组时，您可以使用 JSON.stringify() 和 JSON.parse() 进行序列化和反序列化。

// 将对象序列化并存储在 LocalStorage 中
const user = { name: 'TestUser', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 从 LocalStorage 中获取数据并反序列化
const userJson = localStorage.getItem('user');
const userObj = JSON.parse(userJson);

注意事项

• 请注意 LocalStorage 存储的数据在所有页面和子域名上可见。这意味着如果您在example.com域名下存储了一个键值对，则您的sub.example.com和otherexample.com网站将可以访问该数据。
• LocalStorage 最多可以存储 5MB 的数据。请注意，解压后的数据可能会大得多。
• 请注意，如果用户在浏览器中禁用了本地存储，则不能使用 LocalStorage。
• 在访问 LocalStorage 中的数据之前，请始终检查您的数据是否存在。如果要使用数据，则应检查数据是否为 null。

结论

使用 JavaScript LocalStorage，您可以在客户端计算机上存储键值对。 存储的数据可以是字符串，但是您可以使用 JSON 序列化和反序列化来存储对象和数组。 LocalStorage 具有简单的 API，并且数据在浏览器会话结束后仍然存在。 请注意，超过最大存储量（5MB）或浏览器禁用本地存储可能会导致失败。