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来区分它们，更重要的是，没有两个对象可以具有相同的键名称，如何实现？在我的代码中某处有某种循环？

我希望密钥增加名称：1，名称：2，名称：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

尝试使用数组，您可以将对象存储在数组中，例如：

＆＃13;

$(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'));
  });
});

＆＃13;

<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>

＆＃13;

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

[
    {
       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(","));

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

3 个答案: