在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); 
});