将数组对象存储到local Storage中_怎么把对象保存在本地-CSDN博客

本文链接：https://blog.csdn.net/qq_32810963/article/details/121136897

本文介绍了如何在JavaScript中利用JSON将数组对象转换为字符串并存储到local Storage中。通过示例展示了如何存储和读取JSON解析后的数据，确保在localStorage中正确保存和恢复数组类型的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们平时做项目的时候可能会需要将数组对象存储到本地local Storage中，但是local Stroage只能存储字符串类型的数据(string)，为了能够把数组类型的数据存储到local Stroage中，我们需要用到JSON进行进行数据类型转换。

JSON的简单介绍：

JSON的方法介绍：

（以上图来源于百度百科：JSON JSON_百度百科）

下面我们来通过一个简单的案例来对JSON有一个初步的了解：

1.首先我们先创建一个数组，在里面存入数据后将数组直接存入local Storage中并查看

var datas = [{
            text: '我今天吃八个馒头',
            money: 5
        }, {
            text: '还喝了八杯奶茶',
            money: 20
        }];
localStorage.setItem("eat", datas);

通过查看我们可以得知数组已经存入local Storage中但是具体的数据我们无法了解

2.将上面代码中的存储部分更改为如下代码:

 localStorage.setItem("eat", JSON.stringify(datas));

此时我们查看local Storage就可以清楚的了解数据了

3.此时我们新建一个变量来获取存储到local Stroage中的数据并查看它的类型：

   var data = localStorage.getItem("eat");
        console.log(data);
        console.log(typeof data);

我们可以发现存储进去的数组已被JSON转化了字符串类型

4. 但是我们想要获取到的数据依旧是数组类型，此时我们就需要用到JSON的另一个方法：parse(）：

   data = JSON.parse(data);
        console.log(data);
        console.log(typeof data);

经过转换以后取出来的数据又恢复成了原来的数据类型

以上内容就是关于JSON的简单使用，下面给出全部代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var datas = [{
            text: '我今天吃八个馒头',
            money: 5
        }, {
            text: '还喝了八杯奶茶',
            money: 20
        }];
        // localStorage.setItem("eat", datas);
        // //1.本地存储里面只能存储字符串的数据格式 把我们的数组对象转化为字符串格式 JSON.stringify()
        localStorage.setItem("eat", JSON.stringify(datas));
        var data = localStorage.getItem("eat");
        // console.log(data);
        // console.log(typeof data);
        // // console.log(data[0].title);
        // //2.获取本地存储的数据 我们需要把里面的字符串数据转化为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(typeof data);
    </script>
</body>

</html>