JavaScript localStorage - JavaScript 教程

摘要：在本教程中，您将了解Storage类型以及如何使用JavaScript localStorage来存储持久性数据。

Storage 类型的简介

Storage类型旨在存储名称-值对。Storage类型是一个Object，它具有以下附加方法

setItem(name, value) – 为名称设置值
removeItem(name) – 删除由名称标识的名称-值对。
getItem(name) – 获取给定名称的值。
key(index) – 获取给定数字位置的值的名称。
clear() – 删除所有值。

要获取Storage对象中名称-值对的数量，可以使用length属性。

Storage对象只能存储字符串。它会在存储非字符串数据之前自动将其转换为字符串。

从Storage对象中检索数据时，您将始终获得字符串数据。

JavaScript localStorage 对象

HTML5 规范引入了localStorage作为一种在 Web 浏览器中存储无到期日期的数据的方式。

换句话说，即使关闭浏览器窗口，存储在浏览器中的数据也会持久存在。

存储在localStorage中的数据绑定到一个来源。这意味着localStorage对于每个protocol://host:port都是唯一的。

localStorage 与 cookie 的比较

首先，存储在localStorage中的数据不会像cookie那样在每次请求中发送到服务器。因此，您可以在localStorage中存储更多数据。

大多数现代 Web 浏览器允许您在localStorage中存储多达 5MB 的数据。请注意，您可以在 cookie 中存储多达 4KB 的数据。

其次，存储在localStorage中的数据可以由客户端管理，特别是 Web 浏览器中的 JavaScript。服务器无法访问它。

但是，cookie 可以由 Web 浏览器中的 JavaScript 和服务器共同管理。

访问 localStorage

您可以通过window对象的属性访问localStorage

window.localStorageCode language: JavaScript (javascript)

由于localStorage是Storage类型的实例，因此您可以调用Storage类型的方法来管理数据。

当您在控制台中键入以下代码时

window.localStorageCode language: JavaScript (javascript)

…您将看到以下对象

Storage {length: 0}Code language: CSS (css)

1) setItem() 方法

以下示例使用setItem()方法在localStorage中存储一个名称-值对

window.localStorage.setItem('theme','dark');Code language: JavaScript (javascript)

2) length 属性

要获取名称-值对的数量，您可以像这样使用length属性

console.log(window.localStorage.length); // 1Code language: JavaScript (javascript)

由于window对象是全局的，因此您不需要显式指定它。例如

console.log(localStorage.length); // 1Code language: JavaScript (javascript)

3) getItem() 方法

要通过键获取值，可以使用getItem()方法。以下示例使用getItem()方法获取theme键的值

localStorage.getItem('theme'); // 'dark'Code language: JavaScript (javascript)

4) removeItem() 方法

要通过键删除一个名称-值对，可以使用removeItem()方法。例如

localStorage.removeItem('theme');Code language: JavaScript (javascript)

5) 循环遍历 localStorage 对象的键

以下代码将三个名称-值对存储到localStorage中

localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');Code language: JavaScript (javascript)

要遍历存储在localStorage中的名称-值对，可以使用Object.keys()方法和for...of循环

let keys = Object.keys(localStorage);
for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}Code language: JavaScript (javascript)

输出

color: #111
theme: light
backgroundColor: whiteCode language: HTTP (http)

存储对象

Storage类型仅存储字符串数据。要存储对象，您需要使用JSON.stringify()方法将它们转换为字符串。例如

const settings = {
    backgroundColor: '#fff',
    color: '#111',
    theme: 'light'
};

localStorage.setItem('settings', JSON.stringify(settings));

console.log(localStorage.getItem('settings'));Code language: JavaScript (javascript)

输出：(一个字符串)

'{"backgroundColor":"#fff","color":"#111","theme":"light"}'Code language: JavaScript (javascript)

以下代码从localStorage中检索值，并使用JSON.parse()方法将其转换回对象。

let storedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(storedSettings);Code language: JavaScript (javascript)

storage 事件

当您对Storage对象进行更改时，storage事件将在文档上触发。

storage事件在以下情况下发生

通过调用setItem()方法来存储一个名称-值对。
通过调用removeItem()方法删除一个名称-值对。
以及通过调用clear()方法删除所有值。

storage事件具有以下属性

domain – 存储更改所针对的域。
key – 已设置或删除的键。
newValue – 键设置为的值或null（如果键已删除）。
oldValue – 设置或删除键之前的值。

要侦听storage事件，可以使用window对象的addEventListener()方法，如下所示

addEventListener('storage', function(e){
   console.log(`The value of the ${e.key} changed for the ${e.domain}.`);
});Code language: JavaScript (javascript)

总结

Storage类型为您提供了在 Web 浏览器中存储和管理数据的方法。
localStorage是Storage类型的实例，它允许您在 Web 浏览器中存储持久性数据。
localStorage只能存储字符串。要存储对象，您可以使用JSON.stringify()方法将其转换为字符串。当您从localStorage中检索它们时，您可以使用JSON.parse()方法将字符串转换为对象。

本教程是否有帮助？