在HTML页面上显示本地存储值

Question

我有一项调查，将值存储到本地存储。试图创建一个非常简单的“管理”页面，其唯一目的是仅通过表格等以半有组织的方式显示本地存储。我不确定如何去做。< / p>

以下是我必须存储的内容。

$( document ).ready(function() {
    $('#Save').click(function (e) {
        if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
            var person = $("#FirstName").val() + "." + $('#LastName').val();
            $('input, select, textarea').each(function () {
                var value = $(this).val(),
                    name = $(this).attr('name');
                localStorage[person + "." + name] = value;
                window.location.href = "Confirmation.html";
                console.log('stored key: ' + name + ' stored value: ' + value);
            });
        }
    });
});

存储的密钥是​​firstname.lastname.element，value。如果它可以简单地显示基本上像按键排序的控制台视图那将是伟大的。任何方向都会受到赞赏。

Answer 1

除非您真的无法操纵服务器端代码，否则我强烈建议您使用$.ajax将表单发布到服务器，然后回复响应。我怀疑本地存储是用于以这种方式提交表单。否则，请参阅下文。

为了在下一页显示localStorage项目，您需要在下一页上引用localStorage项目。更改window.location.href后，上一页的上下文不再有效，因此name和value不再存在。您应该对两个页面使用类似的内容：
的 Submit.html

$(document).ready(function() {
    $('#Save').click(function (e) {
        if (confirm('Are you sure you want to submit? You will not be able to go back.')) {
            var person = $("#FirstName").val() + "." + $('#LastName').val();
            $('input, select, textarea').each(function () {
                var value = $(this).val(),
                    name = $(this).attr('name');
                localStorage["name"] = name;
                localStorage["person"] = person;
                localStorage[person + "." + name] = value;
                window.location.href = "Confirmation.html";
                console.log('stored key: ' + name + ' stored value: ' + value);
            });
        }
    });
});

<强> confirmation.html的

$(document).ready(function() {       
    var name = localStorage["name"];
    var person = localStorage["person"];
    var value = localStorage[person + "." + name];
    console.log('stored key: ' + name + ' stored value: ' + value);
});