JavaScript 程序如何使用 localStorage 存储数据

LocalStorage 是一种客户端存储API，它允许JavaScript程序在用户的浏览器上存储数据，该数据没有到期时间、容量通常限制在每个源5MB左右、在页面会话之间保持不变。详细来说，localStorage提供了一个键值对的存储机制，数据存储在用户浏览器中，且同源策略确保了数据的安全性。由于其简单性和跨会话持久性，localStorage特别适合于需要在前端持久化非敏感数据的场景。

一、LOCALSTORAGE 介绍

LocalStorage的介绍不离其两个基本特点：不随浏览器会话结束而消失、数据存储完全在客户端。与sessionStorage相比，后者的数据仅在单个会话窗口中持久，而localStorage数据可以跨浏览器窗口和标签页。LocalStorage是Web Storage API的一部分，该API 还包括sessionStorage。

使用localStorage的好处是显而易见的：与cookies不同，存储在localStorage的数据不会在每次请求时发送到服务器，这样可以减少网络流量、提高性能，并且减轻了服务器的压力。此外，相对来说，localStorage提供了更大的存储空间。

二、如何存储数据

要使用localStorage存储数据，你首先需要明白它是如何工作的。localStorage对象提供了几个方法来存取数据，包括setItem、getItem以及removeItem。

1. 存储数据

存放数据的基本方法是使用setItem()。当你调用localStorage.setItem('myKey', 'myValue')时，键'myKey'会被创建（如果它不存在），然后分配给值'myValue'。这样，数据就被存储下来了，即使关闭浏览器，数据也不会丢失。

localStorage.setItem('user', 'John Doe');

localStorage.setItem('theme', 'dark');
localStorage.setItem('score', '30');

2. 获取数据

获取存储的数据的方法则是使用getItem()。比如，localStorage.getItem('user')将返回之前存储的'John Doe'。

let user = localStorage.getItem('user');

let theme = localStorage.getItem('theme');
let score = localStorage.getItem('score');

三、操作数据

在存储和检索数据的基础上，还需要能够管理localStorage中的数据。

1. 更新数据

更新LocalStorage数据非常直接。只需再次使用setItem()方法即可。此方法将覆盖相同键名的现有数据。

localStorage.setItem('theme', 'light'); // 更新theme为light

2. 删除数据

删除数据也很简单，通过removeItem()方法，传入键名，即可删除对应的键值对。

localStorage.removeItem('score'); // 删除名为'score'的数据项

四、遍历和清理

localStorage也允许遍历存储的项目，并且可以清除所有的数据。

1. 遍历数据

可以使用循环来遍历localStorage中的所有数据。使用length属性和key()方法是获取键名的常见方式。

for (let i = 0; i < localStorage.length; i++) {

  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

2. 清除所有数据

如果需要清除所有的localStorage数据，可以使用clear()方法。

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

五、高级操作与实践

在掌握了localStorage的基本操作之后，可以执行更复杂的任务，例如存储对象和数组、监听存储事件以及实现数据存储的最佳实践。

1. 存储对象和数组

LocalStorage本质上只能存储字符串。要存储对象或数组，需要将它们转换为JSON字符串。相应的，取出时需要转换回原类型。

let user = { name: 'John', age: 30 };

localStorage.setItem('user', JSON.stringify(user)); // 存储对象
let storedUser = JSON.parse(localStorage.getItem('user')); // 获取对象

2. 监听存储事件

可以监听storage事件，该事件在存储数据变化时触发。

window.addEventListener('storage', (event) => {

  if (event.key === 'theme') {
    console.log(`Theme changed to ${event.newValue}`);
  }
});

3. 最佳实践

LocalStorage虽然方便，但是在使用时也有一些最佳实践需要遵守。应该减少对localStorage的访问次数，尽量在读取数据后缓存在内存中。还应该确保在存储敏感数据之前进行加密，避免潜在的XSS攻击导致数据的泄露。

六、限制与替代方案

虽然localStorage非常有用，但它也有自己的限制。例如，它是同步的，可能导致在大量数据操作时阻塞主线程。 此外，由于其容量限制，对于更大型的数据存储需求，并不完全适用。

1. 限制

• 同步操作，可能会影响性能。
• 仅限字符串，不能直接存储对象。
• 容量限制，通常为5MB。

2. 替代方案

当localStorage不足以满足需求时，可以考虑IndexedDB和WebSQL等技术。IndexedDB是更强大的客户端存储解决方案，支持异步操作，可以存储大量数据。

// IndexedDB示例代码

let openRequest = window.indexedDB.open('myDatabase', 1);
openRequest.onupgradeneeded = function(e) {
  let db = e.target.result;
  if (!db.objectStoreNames.contAIns('users')) {
    db.createObjectStore('users', { keyPath: 'id' });
  }
};

LocalStorage为不同的Web应用提供了一种简单而有效的数据存储机制。掌握其API是前端开发者的必备技能之一，但在实际工作中，了解它的局限性和适合的用例同样重要。在进行大量数据存储或需要支持复杂查询的情况下，就需要考虑更强大的客户端存储技术，如IndexedDB。

相关问答FAQs：

问题一：JavaScript 中如何使用 localStorage 进行数据存储？

回答：要在JavaScript中使用localStorage进行数据存储，首先需要使用localStorage对象。可以通过localStorage.setItem()方法将数据存储到localStorage中。例如，我们可以使用以下代码将一个名为"username"的字符串存储到localStorage中：

localStorage.setItem("username", "John");

这将在浏览器的localStorage中创建一个键为"username"，值为"John"的数据项。

问题二：如何从 localStorage 中获取存储的数据？

回答：要从localStorage中获取存储的数据，可以使用localStorage.getItem()方法。通过指定键名，我们可以获取该键对应的值。例如，我们可以使用以下代码获取名为"username"的值：

let username = localStorage.getItem("username");
console.log(username); // 输出 "John"

这将从localStorage中获取键为"username"的值，并将其存储在变量username中。

问题三：如何删除 localStorage 中的数据？

回答：要删除localStorage中的数据，可以使用localStorage.removeItem()方法。通过指定要删除的键名，我们可以从localStorage中删除相应的数据项。例如，我们可以使用以下代码删除名为"username"的键值对：

localStorage.removeItem("username");

这将从localStorage中删除键为"username"的数据项。注意，删除的数据无法恢复，请谨慎操作。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。