照片由 Priscilla Du Preez 在 Unsplash 上提供。
localStorage 是一种 Web 存储 API，允许 JavaScript 网站和应用程序在用户的浏览器中存储和访问数据。它是一种非常有用的工具，提供了一种在浏览器会话和页面重新加载之间持久化数据的方法。
理解 localStorage 的基础知识
localStorage 提供了一种简单、直观的方式来存储键值对。键和值始终是字符串。你可以存储任何类型的数据，但非字符串数据需要在存储之前转换为字符串，然后在检索后解析回其原始形式。
让我们从一个基本示例开始。要在 localStorage 中存储数据，我们使用 setItem 方法。
localStorage.setItem('name', 'John Doe');
在这个例子中，“name”是键，“John Doe”是值。要检索此数据，我们使用 getItem 方法。
let name = localStorage.getItem('name');
console.log(name); // Outputs: "John Doe"
localStorage 中的错误处理
localStorage 通常是可靠的，但它并非完美无缺。它有一个最大存储限制，这个限制可能因不同的浏览器而异。如果超过此限制，将会抛出错误。
此外，某些浏览器（或浏览器设置）可能不支持 localStorage，或者用户可能已禁用它。因此，在使用 localStorage 时，最好包括错误处理。
try {
localStorage.setItem('key', 'value');
} catch (e) {
if (e.code === DOMException.QUOTA_EXCEEDED_ERR) {
console.error('localStorage quota exceeded');
} else {
console.error('localStorage error', e);
}
}
在 localStorage 中存储非字符串数据
如前所述，localStorage 仅存储字符串。但是，如果我们要存储对象或数组，该怎么办？我们可以使用 JSON.stringify 将对象或数组转换为字符串来实现这一点。
以下是一个示例：
let user = {
name: 'John Doe',
email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));
要检索此对象，我们使用 JSON.parse 将其转换回对象。
let user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // Outputs: "John Doe"
从 localStorage 中删除数据
有两种方法可以从 localStorage 中删除数据。removeItem 方法允许你删除特定项，而 clear 方法则删除所有数据。
以下是两种方法的示例：
// Removes the 'name' item
localStorage.removeItem('name');
// Removes all data
localStorage.clear();
使用 localStorage 进行会话持久性
localStorage 的一个常见用例是维护会话持久性。这意味着当用户访问你的站点或应用程序时，即使他们离开页面或关闭浏览器，他们的会话数据也将被保存。
这里是一个简单的例子。假设我们想要存储用户的首选语言。当用户选择语言时，我们将其存储在 localStorage 中。然后，每次加载页面时，我们都会检查是否在 localStorage 中存储了首选语言，如果有，则相应地设置页面的语言。
// Set the language
function setLanguage(language) {
localStorage.setItem('language', language);
}
// Get the language
function getLanguage() {
return localStorage.getItem('language');
}
// Use the language
let language = getLanguage();
if (language) {
// Set the page's language...
}
localStorage 和性能
虽然 localStorage 是同步和阻塞的，这意味着如果使用不当，它可能会减慢你的 Web 应用程序，但对性能的影响通常可以忽略不计，对于小量的数据，从 localStorage 设置或获取数据的时间通常少于一毫秒，比向服务器发出的 HTTP 请求要快。
但是，如果你存储大量数据或执行频繁的 localStorage 操作，可能会开始看到一些性能影响。在这些情况下，你可能需要考虑使用不同的存储方法，例如 IndexedDB，它是异步和非阻塞的。
localStorage vs. sessionStorage vs. cookies
值得注意的是，localStorage 不是在浏览器中存储数据的唯一方法。还有 sessionStorage 和 cookies。了解这些存储机制之间的差异可以帮助你为特定需求做出正确的选择。
localStorage 持久存在，直到用户或应用程序明确删除它。sessionStorage 也以键值对的形式存储数据，但这些数据仅在浏览器会话结束时保留。当标签页或窗口关闭时，sessionStorage 数据会被删除。
cookies 也允许你存储跨会话持久存在的数据，但它们具有一些独特的特点。它们可以随每个 HTTP 请求发送回服务器，这使它们对于像身份验证令牌这样的事物非常有用。然而，它们的大小限制要小得多（约为 4KB），而 localStorage 和 sessionStorage 的大小限制约为 5MB。
localStorage 和安全性
虽然 localStorage 功能强大，但请记住，它不是设计为安全或私有存储机制。存储在 localStorage 中的数据可被同一域中的任何脚本访问。这意味着恶意脚本可能会读取或覆盖此数据。
此外，值得注意的是，因为 localStorage 数据存储在客户端，所以用户可以查看或编辑它。因此，你永远不应该在 localStorage 中存储敏感数据，例如密码、信用卡号码或个人身份信息（PII）。
使用 localStorage 的最佳实践
以下是使用 localStorage 有效和负责任的一些通用最佳实践：
- 不要存储敏感数据： 如前所述，localStorage 不安全或私有，因此永远不要存储敏感或个人数据。
- 验证和清理数据： 由于 localStorage 数据可能会被用户或其他脚本篡改，因此始终在使用之前验证和清理此数据。
- 不要依赖 localStorage 进行关键功能： localStorage 是提高用户体验的好工具，但不要依赖它进行关键功能，因为用户可以清除其 localStorage 数据，有些用户可能已禁用或不支持 localStorage。
- 不要忘记存储限制： 每个域的存储限制约为 5MB。尽量减少你要存储的数据量，并始终处理
setItem调用可能由于超过存储配额而失败的可能性。 - 考虑使用库： 有许多 JavaScript 库提供更易于使用的 localStorage API，并添加有用的功能，例如自动 JSON 编码/解码、到期时间、默认值等。
总结
localStorage 是 JavaScript 开发人员工具包中的一个强大工具。它易于使用，支持所有现代浏览器，并允许你在用户的浏览器中存储数据，即使在会话之间也能持久化。这可以显著提高用户体验，允许实现功能，例如记住用户首选项、保存草稿数据等。然而，就像所有工具一样，localStorage也有其限制，不适用于每种情况。在localStorage中存储的数据不安全，可能被篡改，并且存储空间有限。在使用localStorage时，始终要遵循最佳实践，包括验证和净化数据、不存储敏感信息以及处理可能超出存储限制的情况。
评论(0)