Localstorage JavaScript 数组 - Javascript

本文主要介绍在Javascript中如何使用本地存储（LocalStorage）来存储和读取数组。

什么是本地存储（LocalStorage）？

LocalStorage是在浏览器中存储数据的一种方式，用于将数据存储在用户的计算机上。它可以存储字符串类型的数据，并且只能通过JavaScript代码进行访问。另外，LocalStorage只能存储在浏览器关闭之前，它并不是用于长期存储数据的最佳方法。LocalStorage的容量限制为5MB。

如何将数组存储到LocalStorage？

使用LocalStorage存储数组数据需要将数组转换为字符串。可以使用JSON.stringify()方法将数组转换为字符串。JSON.stringify()方法是将JavaScript对象或值转换为JSON字符串的方法。

// 创建一个数组
let fruits = ['apple', 'banana', 'mango', 'orange'];

// 将数组转换为字符串
let fruits_str = JSON.stringify(fruits);

// 存储到LocalStorage中
localStorage.setItem('fruits', fruits_str);

在这个例子中，我们将一个包含水果名称的数组转换为字符串，并将其存储到LocalStorage中。我们使用setItem()方法来存储数据，并指定键值对的名称。

如何从LocalStorage中读取数组？

使用LocalStorage从中读取数组数据需要将字符串转换回数组。可以使用JSON.parse()方法将字符串转换为数组。

// 从LocalStorage中获取数据
let fruits_str = localStorage.getItem('fruits');

// 将字符串转换为数组
let fruits = JSON.parse(fruits_str);

在这个例子中，我们从LocalStorage中获取存储的水果数组数据。我们使用getItem()方法来获取数据，并指定保存时使用的键值对名称。然后，我们使用JSON.parse()方法将字符串转换为数组。

如何更新LocalStorage中存储的数组？

如果要更新LocalStorage中已存储的数组，只需将更新后的数组再次存储到LocalStorage中。通过使用相同的键值对名称，旧的数据将被新的数据替换。

// 获取LocalStorage中存储的数组
let fruits_str = localStorage.getItem('fruits');
let fruits = JSON.parse(fruits_str);

// 更新数组
fruits.push('pear');
fruits.push('grape');

// 将更新后的数组存储回LocalStorage
let updated_fruits_str = JSON.stringify(fruits);
localStorage.setItem('fruits', updated_fruits_str);

在这个例子中，我们从LocalStorage中获取存储的水果数组数据，并将更新后的数组重写回LocalStorage中。我们使用push()方法将两个新的水果添加到数组中，然后再次使用JSON.stringify()方法将数组转换为字符串，并使用setItem()方法来将新的数组存储回LocalStorage中。

总结

在Javascript中，LocalStorage是一种简单的存储数据的方式。虽然它只能存储字符串类型的数据，但它可以很容易地转换回Javascript对象或数组。当需要在浏览器中存储小型数据时，LocalStorage是一个不错的选择。