JavaScript在LocalStorage中存储数组

LocalStorage是HTML5新加入的Web API之一，它为网页应用提供了方便的本地存储功能，可以将数据存储在用户的浏览器中，以供稍后使用。在这篇文章中，我们将了解如何在LocalStorage中存储数组，并从中读取数据。

存储数组

存储数组非常简单，我们只需要将JavaScript数组序列化为字符串，然后使用LocalStorage API的setItem方法将其保存在LocalStorage中。我们可以使用JSON.stringify()函数将数组序列化为字符串。

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

在这个例子中，我们将名为“fruits”的数组存储在LocalStorage中。

读取数组

要读取存储在LocalStorage中的数组，我们只需要使用getItem方法获取序列化字符串，然后使用JSON.parse()函数将其反序列化为JavaScript对象。这将返回存储在LocalStorage中的原始数组。

var storedFruits = localStorage.getItem('fruits');
var fruits = JSON.parse(storedFruits);

在这个例子中，我们使用getItem方法获取名为“fruits”的存储项。然后，我们使用JSON.parse函数将存储的字符串转换回JavaScript对象。最后，我们将存储的数组存储在变量“fruits”中。

检查LocalStorage是否可用

LocalStorage不是每个浏览器都支持。在使用LocalStorage API时，我们应该检查它是否可用。我们可以检查localStorage是否存在并且是否可写。以下是一个简单的检查LocalStorage的代码：

function localStorageAvailable() {
  try {
    var x = '__storage_test__';
    localStorage.setItem(x, x);
    localStorage.removeItem(x);
    return true;
  }
  catch (e) {
    return false;
  }
}

在该函数中，我们首先尝试设置和删除一个随机字符串。如果LocalStorage可用，则不会出现异常并返回true。否则，该函数将返回false。

总结

LocalStorage为Web应用程序提供了方便且易于使用的本地存储功能。它可以存储各种JavaScript对象，包括数组。在存储数组时，我们将其序列化为字符串并使用setItem方法存储。在读取数组时，我们反序列化存储的字符串以获取原始数组。我们还应该检查LocalStorage是否可用，以确保我们的代码在不支持该功能的浏览器上不会崩溃。