localStorage详解

介绍

localStorage是HTML5新加入的，用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。我们可以通过window对象来访问本地存储对象，它允许我们添加、修改或删除本地存储的数据。

使用 localStorage 存储数据时，此数据不会过期并在不同会话中持续存在。

数据通过键值对存储，并且始终采用 UTF-16（字符串）格式存储。

它是如何使用的？

在访问Storage类型的对象时，localStorage 为我们提供了一系列方法来存储、修改或删除存储的项目。我们将在下面看到它们：

setitem()

接收键值对并将它们添加到本地存储。如果键已经存在，它将更新其值。

const notas = [
  { id: 1, cuerpo: "Leer libro: Malestar en la cultura,Ensayo sobre la ceguera, Clean Code..." },
  { id: 2, cuerpo: "Practicar higiene del sueño: Al acercarse la hora de dormir, apagar/atenuar luces, no usar el móvil, reducir la temperatura y relajarse." },
  { id: 3, cuerpo: "Reducir fuentes de recompensa inmediatas: Móvil, juegos, masturbación etc..." }
];

const texto = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eu justo sollicitudin tempor. "


localStorage.setItem("notas",JSON.stringify(notas));
localStorage.setItem("texto",texto);

这里我们有一个对象数组（“notes”对象数组）和一个文本字符串（变量“text”），调用的本地存储中localStorage.setItem()，接收一个键作为第一个参数，一个值作为第二个参数。

由于信息必须以字符串格式存储，这里我们使用JSON.stringify( ) 将我们的数组转换为JSONnotas表示法并将其作为函数的第二个参数传递。setItem()

key()

此方法接收一个键号“n”，并将返回本地存储中第 n 个键的名称。

console.log(localStorage.key(0))
console.log(localStorage.key(1))

getItem()

不像key(), getItem接收一个键名（字符串而不是数字）并返回对应键的值。

如果我们想检索存储在 localStorage 中的数据，我们应该使用getItem()，但请记住数据存储在一个字符串中（在这种情况下，notes 是 JSON 格式），所以我们应该使用JSON.parse()来转换它解析结构，JavaScript 中的有效数据。

const arrayNotas = JSON.parse(localStorage.getItem("notas"));

console.log(arrayNotas);

通过将其转换为 JavaScript 数组，我们可以将其存储在变量中。

如果我们没有进行转换，则会以存储数组的 JSON 格式返回一个字符串，因此我们将无法访问所述数组的索引，也无法访问它们各自的属性（如果它们是对象）。

removeItem()

接收要从本地存储中删除的键的名称（字符串）作为参数。

localStorage.removeItem("texto");

什么时候使用它？

使用 sessionStorage，数据只会保存到窗口或选项卡关闭。使用 localStorage ，数据会一直保留到用户手动清除浏览器缓存或 Web 应用程序清除数据为止。因此，每当我们希望数据持久化时，我们都可以使用 localStorage。