如何将相似类型的多个对象添加到本地存储

Question

我在这里和其他一些网站上看到了几种将对象添加到本地存储的解决方案，但我的问题略有不同。我想将几个相关项目保存到本地存储。像这样

<head>
<script type="text/javascript" src="jquery.js"></script>

</head>
<body>
<input type='text' id='firstname' placeholder="first name"><br>
<input type='text' id='surname' placeholder="surname"><br>
<button id='submit'>Add</button>

<div id='displaynames'>

 <script>
$(document).ready(function(){
    $('button').click(function(){

        firstname = $('#firstname').val();
        surname = $('#surname').val();
        $('#displaynames').append("<p>"+firstname+" "+surname+"</p>");

        var names = {
            id: //what goes here?,
            name: firstname,
            lastname: surname
        };

        localStorage.setItem('names:'+counter, JSON.stringify(names));
        counter++;
        $('#displaynames').html(localStorage.getItem('names'));

    });
})   
</script>
</body>

这个对象的所有属性都将由用户提供，但是没有两个对象会有相同的id来区分它们，更重要的是，没有两个对象可以有相同的键名，这是如何实现的？我的代码中某处存在某种循环？

我希望密钥像 names:1、names:2、names:3 等那样递增

Answer 1

您也可以将 counter 本身存储在 localStorage 中，这样每次您需要添加新项目时，请务必增加计数器。

// Get current counter from LS and increment it
var counter = localStorage.getItem('counter');
counter++;

// Put names in LS with a new counter id
localStorage.setItem('names:'+counter, JSON.stringify(names));

// Put back the incremented counter into LS
localStorage.setItem('counter', counter);

但是正如评论中所建议的那样，使用一个数组来放置所有 names 会更明智。添加新名称时，其 id 可以简单地为 "names:" + namesArray.length

Answer 2

尝试使用数组，你可以将对象存储在数组中，我的示例：

$(document).ready(function() {
  var allNames = [];
  $('button').click(function() {
    firstname = $('#firstname').val();
    surname = $('#surname').val();
    $('#displaynames').append("<p>" + firstname + " " + surname + "</p>");

    var names = {
      id: allNames.length,
      name: firstname,
      lastname: surname
    };

    allNames.push(names);

    localStorage.setItem('names', JSON.stringify(allNames));
    $('#displaynames').html(localStorage.getItem('names'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='text' id='firstname' placeholder="first name">
<br>
<input type='text' id='surname' placeholder="surname">
<br>
<button id='submit'>Add</button>

<div id='displaynames'></div>

希望该代码段有效。如果没有，我要做的是创建一个包含要存储的对象的数组：

[
    {
       id: 0,
       name: "Foo",
       lastname: "Bar"
    },
{
       id: 1,
       name: "Bar",
       lastname: "Foo"
    },
{
       id: 2,
       name: "Bob",
       lastname: "Joe"
    },
]

Answer 3

通过对其 ID 的串联引用来存储相似类型对象的代码：

    let productBag = window.localStorage.getItem("product_id");

    console.log(productBag);

    if (productBag != undefined) {

      let tempData = productBag + "," + product['_id'];
      window.localStorage.setItem("product_id", tempData);

    } else {

      window.localStorage.setItem("product_id", product['_id']);

    }

按 ID 显示项目的代码：

 var test =  window.localStorage.getItem("product_id")

 console.log(test.split(","));

如何将相似类型的多个对象添加到本地存储

How do I add Multiple Objects of a similar type to local storage

javascript

local-storage