Javascript 本地存储+；jQuery自动保存并加载p_Javascript_Jquery

Javascript 本地存储+；jQuery自动保存并加载p

javascript jquery

Javascript 本地存储+；jQuery自动保存并加载p,javascript,jquery,Javascript,Jquery,我有一个密码： $(document).ready(function() { var count = 1; $("button").click(function() { var inputVal = $('input').val(); $('div').append("<p>"+ inputVal +"</p>"); localStorage.setItem('pvalue'+count, inputVal

我有一个密码：

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

})

$（文档）.ready（函数（）{
var计数=1；
$（“按钮”）。单击（函数（）{
var inputVal=$（'input'）.val（）；
$（'div'）。追加（“”+inputVal+””；
setItem（'pvalue'+count，inputVal）；
$（“输入”）。替换为（“”）；
})
var local=localStorage.getItem（“pvalue”+count）；
$（'div'）。追加（“”+local+””；
})

此代码保存输入的所有值，但仅显示第一个值。我不知道刷新后如何显示所有保存的p标签，有人能帮我吗

HTML:


添加

该问题是由于您使用了

count

变量造成的。这在设置数据时是可以的，但是当重新加载数据时，

count

将被设置回

，并且您不会明确知道保存了多少条记录

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

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var inputVal=$（'input'）.val（）；
$（'div'）。追加（“”+inputVal+””；
var pValues=JSON.parse（localStorage.getItem（'pvalue'））| |[]；
pValues.push（输入值）；
setItem（'pvalue'，JSON.stringify（pValues））；
})
var pValues=JSON.parse（localStorage.getItem（'pvalue'））| |[]；
var html=pValues.map（函数（本地）{
返回“”+本地+””；
}).加入（“”）；
$（'div'）.append（html）；
})

没问题，很乐意帮忙。如果需要，这里有一个fiddle中的工作示例，它不允许在代码段中访问localStorage：

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

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