JS 中的 LocalStorage

介绍

LocalStorage 是一种在浏览器中存储数据的持久化机制，它提供了一种简单而强大的方式来在客户端存储和检索键值对。

通过 LocalStorage，程序员可以将数据保存在用户的浏览器中，并在之后的页面加载中检索它们。这样做可以减少对服务器的请求，提高用户体验，并允许离线访问应用程序。

如何使用 LocalStorage

存储数据

要将数据存储到 LocalStorage 中，可以使用 localStorage.setItem() 方法。该方法接受两个参数，第一个参数是键（key），第二个参数是值（value）。

localStorage.setItem('key', 'value');

检索数据

要从 LocalStorage 中检索数据，可以使用 localStorage.getItem() 方法。该方法接受一个参数，即要检索的键（key），并返回与该键关联的值（value）。

const value = localStorage.getItem('key');

移除数据

要从 LocalStorage 中移除数据，可以使用 localStorage.removeItem() 方法。该方法接受一个参数，即要移除的键（key）。

localStorage.removeItem('key');

清空数据

要清空整个 LocalStorage，可以使用 localStorage.clear() 方法。

localStorage.clear();

检查支持

在使用 LocalStorage 之前，我们可以使用 typeof 操作符检查浏览器是否支持它。

if (typeof Storage !== 'undefined') {
  // LocalStorage is supported
} else {
  // LocalStorage is not supported
}

限制和注意事项

• LocalStorage 存储的数据是以字符串的形式存储的，如果需要存储复杂的对象，可以使用 JSON.stringify() 和 JSON.parse() 方法进行序列化和反序列化。
• 不同的浏览器在 LocalStorage 的使用方式上可能存在差异，比如存储容量限制或存储数据的时效性等。
• 存储在 LocalStorage 中的数据对于同源策略是可见的，这意味着只有在相同的域名下才能访问该数据。

总结

LocalStorage 是一种在浏览器中存储数据的持久化机制，通过使用 localStorage.setItem() 存储数据，localStorage.getItem() 检索数据，localStorage.removeItem() 移除数据和 localStorage.clear() 清空数据的方法，我们可以在客户端存储和检索数据。在使用 LocalStorage 时，需要注意数据存储形式、浏览器支持差异和同源策略等问题。