如何在本地存储中存储对象数组？

Question

如何在本地存储中存储对象数组？

47

这是我的代码。我已经试了几天来创建一个对象数组，然后将其存储在本地存储中。问题在于，我需要首先从本地存储中获取现有的值。接着，我需要将新数据对象添加到现有数组中。然后，我将其转换为JSON格式，以便可以将其存储回本地存储。

onRegisterSubmit(){
    const user = {
        a: this.a,
        b: this.b,
        c: this.c,
      id: Date.now()
    }    

   var abc = [];
   var get =  JSON.parse(localStorage.getItem('user'));
   abc = [get];
   abc.push(user);

   localStorage.setItem('user', JSON.stringify(abc));

   console.log(JSON.stringify(abc));
   console.log(get);
  }

我希望JSON是这样的对象数组：

[{"hour":1,"minute":21,"ampm":"PM","repeatDays":[],"message":"","todayOrTomorrow":"Tomorrow","isRepeatMode":false,"isEnabled":false,"id":"1493797882440"},{"hour":1,"minute":24,"ampm":"PM","repeatDays":[],"message":"","todayOrTomorrow":"Tomorrow","isRepeatMode":false,"isEnabled":false,"id":"1493797896257"},{"hour":6,"minute":14,"ampm":"PM","repeatDays":[],"message":"","todayOrTomorrow":"Tomorrow","isRepeatMode":false,"isEnabled":false,"id":"1493815470408"}]

这是我的 JSON。

[[[[[[[{"id":1493820594019},{"id":1493820606448}],{"id":1493820609111}],{"id":1493820610150}],{"id":1493820610553}],{"id":1493820610827}],{"id":1493820611015}],{"id":1493820612018}]

我已经尝试了几天，任何帮助都将不胜感激。

- Juggernaut

2

有什么问题吗？你遇到了什么错误？ - Turtle

当 onRegisterSubmit 被执行时，它将变成以下结构。[[[[[[[{"id":1493820594019},{"id":1493820606448}],{"id":1493820609111}],{"id":1493820610150}],{"id":1493820610553}],{"id":1493820610827}],{"id":1493820611015}],{"id":1493820612018}] - Juggernaut

可能是在HTML5 localStorage中存储对象的重复问题。 - xale94

是的，但我几乎没有理解这些回复。我确实尝试过它们。我的错误在哪里？ - Juggernaut

3个回答

6

尝试类似这样的东西：- 链接 https://jsfiddle.net/sureshraina/nLexkyfw/1/

var mydatas = new Array();
        mydatas[0] = "data";
        mydatas[1] = "data1";
        mydatas[2] = "data2";

        localStorage["mydatas"] = JSON.stringify(mydatas);

        var datas = JSON.parse(localStorage["mydatas"]);

- Suresh B

4

请参考这篇文章。

你不能直接存储对象，你需要将对象转换成字符串后再进行存储。因此解决办法是在存储前将对象序列化（例如，可以将其转换为 JSON 对象，进行存储，并在需要时再次读取）。

- Turtle

当您对一个回答进行负评时，请发布一条评论解释为什么要这样做，否则它就没有多大意义了。 - Turtle

你的答案是正确的，我也是这样做的。我点了个赞，不知道为什么有人给了个踩。 - Juggernaut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

这段代码存在以下问题：

你将获取到的结果包装在一个数组中，但理论上，你希望已经有一个数组了。
~~你存储了 user，而不是 get 或者 abc。~~ (你已经通过编辑解决了这个问题。)

为了存储数组，像你现在这样做即可:

localStorage.setItem("users", JSON.stringify(users));

获取数组：

users = JSON.parse(localStorage.getItem("users") || "[]");

请注意，如果getItem返回null，那么它会提供默认值（空数组），因为我们从未将用户存储在那里。

要将用户添加到数组中：

users.push({id: 1, foo: "bar"});

示例（在 jsFiddle 上实时查看 [Stack Snippets 不支持本地存储]）：

(function() { // Scoping function to avoid creating globals
    // Loading
    var users = JSON.parse(localStorage.getItem("users") || "[]");
    console.log("# of users: " + users.length);
    users.forEach(function(user, index) {
        console.log("[" + index + "]: " + user.id);
    });

    // Modifying
    var user = {
        id: Math.floor(Math.random() * 1000000)
    };
    users.push(user);
    console.log("Added user #" + user.id);

    // Saving
    localStorage.setItem("users", JSON.stringify(users));
})();

这会在控制台显示当前用户的列表，每次刷新页面都会添加一个用户。