将数组存储在本地存储中 - JavaScript

在 JavaScript 中我们可以使用本地存储（localStorage）对象来将数组存储在客户端本地。这样可以避免每次刷新页面时都重新加载数组数据。本文将介绍如何将数组存储在本地存储中，同时也会讨论一些常见的问题和最佳实践。

存储数组

要将数组存储在本地存储中，我们需要将其转换成字符串并使用 localStorage.setItem() 方法将其存储在本地：

const myArray = ['apple', 'banana', 'orange'];
localStorage.setItem('myArray', JSON.stringify(myArray));

上面的代码将 myArray 数组以 "myArray" 键的形式存储在本地存储中。由于本地存储只能存储字符串类型的数据，因此我们使用 JSON.stringify() 方法将数组转换为字符串。

获取存储的数组

要获取存储在本地存储中的数组，我们可以使用 localStorage.getItem() 方法将其作为字符串获取，然后使用 JSON.parse() 将其解析成 JavaScript 对象：

const storedArray = localStorage.getItem('myArray');
const myArray = JSON.parse(storedArray);
console.log(myArray); // ['apple', 'banana', 'orange']

上面的代码从本地存储中获取了存储的 "myArray" 数据，使用 JSON.parse() 将其解析为 myArray 数组。

判断键是否存在

在从本地存储中获取数据之前，我们可能需要先判断键是否存在。我们可以使用 localStorage.getItem() 方法获取数据并检查其返回值是否为 null：

const storedArray = localStorage.getItem('myArray');
if (storedArray !== null) {
  const myArray = JSON.parse(storedArray);
  console.log(myArray);
} else {
  console.log('myArray is not in local storage');
}

上面的代码检查了本地存储中是否存在 "myArray" 数据，如果存在则将其解析为 myArray 数组，否则将输出一条消息。

删除存储的数组

要删除存储在本地存储中的数组，我们可以使用 localStorage.removeItem() 方法并传入要删除的键：

localStorage.removeItem('myArray');

上面的代码从本地存储中删除了存储的 "myArray" 数据。

最佳实践

以下是一些将数组存储在本地存储中的最佳实践：

• 首先应该判断键是否存在，并在存在时再获取数据。这样可以避免 getItem() 方法返回 null，从而抛出 JSON.parse()` 错误
• 在存储时也应该使用 try-catch 语句，这样可以捕获 JSON.stringify() 方法抛出的任何错误并处理异常情况
• 同样，也应该使用 try-catch 语句来捕获 JSON.parse() 方法抛出的任何错误

结论

本文介绍了如何将数组存储在客户端本地的本地存储中，并介绍了一些最佳实践和常见问题。通过将数组存储在本地存储中，我们可以避免每次刷新页面时都重新加载数据，提高页面性能并带来更好的用户体验。