如何在本地存储中保存数组 - js - Javascript

在开发前端应用程序时，通常需要在浏览器本地存储中保存数据。Javascript提供了一些API，使您可以轻松地将数据保存到本地存储中。

在本文中，我们将讨论如何使用Javascript将数组保存到本地存储中。我们将介绍以下本地存储API:

• localStorage API
• sessionStorage API
• cookies API

使用localStorage API保存数组

localStorage API提供了一种在浏览器客户端中持久存储数据的方法。使用此API，您可以将任何类型的数据（包括数组）保存在浏览器中。

以下是如何使用localStorage API保存数组的示例：

// 定义一个数组
var myArray = [1, 2, 3, 4, 5];

// 使用localStorage API将数组存储在本地
localStorage.setItem('myArray', JSON.stringify(myArray));

在上面的示例中，我们使用JSON.stringify()将数组转换为字符串，并使用localStorage.setItem()将其保存在本地存储中。

要检索本地存储中的数组，可以使用以下代码：

// 检索保存的数组
var savedArray = localStorage.getItem('myArray');

// 将字符串转换为数组
var newArray = JSON.parse(savedArray);

在上面的示例中，我们使用localStorage.getItem()来获取本地存储中的字符串，并使用JSON.parse()将其转换为数组。

请注意，localStorage API只存储字符串。因此，我们需要使用JSON.stringify()和JSON.parse()将数组转换为字符串和从字符串中转换回数组。

使用sessionStorage API保存数组

sessionStorage API类似于localStorage API，但数据仅在会话期间存储。当会话结束时，存储的数据将被删除。

以下是如何使用sessionStorage API保存数组的示例：

// 定义一个数组
var myArray = [1, 2, 3, 4, 5];

// 使用sessionStorage API将数组存储在本地
sessionStorage.setItem('myArray', JSON.stringify(myArray));

在上面的示例中，我们使用JSON.stringify()将数组转换为字符串，并使用sessionStorage.setItem()将其保存在会话存储中。

要检索会话存储中的数组，可以使用以下代码：

// 检索保存的数组
var savedArray = sessionStorage.getItem('myArray');

// 将字符串转换为数组
var newArray = JSON.parse(savedArray);

在上面的示例中，我们使用sessionStorage.getItem()来获取会话存储中的字符串，并使用JSON.parse()将其转换为数组。

使用cookies API保存数组

cookies API提供另一种在浏览器客户端中存储数据的方法。与localStorage和sessionStorage不同，cookies存储在浏览器中，但是可以设置到期时间。

以下是如何使用cookies API保存数组的示例：

// 定义一个数组
var myArray = [1, 2, 3, 4, 5];

// 将数组转换为字符串
var arrayString = JSON.stringify(myArray);

// 设置cookie
document.cookie = 'myArray=' + arrayString + ';expires=Wed, 1 Jan 2023 00:00:00 UTC;';

在上面的示例中，我们使用JSON.stringify()将数组转换为字符串，并使用document.cookie设置cookie。

要检索cookie中的数组，可以使用以下代码：

// 检索保存的数组
var savedArray = document.cookie.split(';')
    .find(function(item) {
        return item.trim().startsWith('myArray=');
    });

// 将字符串转换为数组
var newArray = JSON.parse(savedArray.split('=')[1]);

在上面的示例中，我们使用document.cookie检索cookie，并使用split()和find()查找键为'myArray'的数据。然后，我们使用JSON.parse()将字符串转换为数组。

请注意，要设置cookie的到期时间，可以使用expires属性。在上面的示例中，我们将到期时间设置为2023年1月1日。