Question

I have a code:

$(document).ready(function() {
    var count = 1;

    $("button").click(function() {
        var inputVal = $('input').val();
        $('div').append("<p>"+ inputVal +"</p>");
        localStorage.setItem('pvalue'+count, inputVal);
        $("input").replaceWith("<input id='num_" + count++ +"'/>");
    })

    var local = localStorage.getItem("pvalue"+ count);
    $('div').append("<p>"+ local +"</p>");

})

This code saves all values of input but shows only first. I dont know how to display all saved p tags after refresh, can anybody help me?

HTML:

<body>
    <div class='mt-5 text-center'>
        <input> <button>Add</button>
    </div>

    <script src='script.js'></script>
</body>

Answer 1

该问题是由于您使用了count变量。设置数据时可以这样做，但是将其重新加载时，count将被设置回1，并且您将不会明确知道已保存了多少个条目。

一个更好的主意是将一个数组存储在localStorage中，您可以轻松地添加和检索该数组。试试这个：

$(document).ready(function() {
  $("button").click(function() {    
    var inputVal = $('input').val();
    $('div').append("<p>" + inputVal + "</p>");    

    var pValues = JSON.parse(localStorage.getItem('pvalue')) || [];
    pValues.push(inputVal);
    localStorage.setItem('pvalue', JSON.stringify(pValues));
  })

  var pValues = JSON.parse(localStorage.getItem('pvalue')) || [];
  var html = pValues.map(function(local) {
    return '<p>' + local + '</p>';
  }).join('');
  $('div').append(html);
})

localStorage + jQuery autosave and load p

1 个答案: