在HTML页面显示本地存储值

Question

我有一个调查，存储值为本地存储。试图做一个非常简单的'管理员'页面，其唯一目的是只有通过表等以半组织方式显示本地存储。我不确定如何去解决它。

这是我必须存储它。

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