JavaScript/HTML5 显示本地存储

Question

有没有一种简单的方法可以使用 document.write 或 document.innerHTML 方法来显示我的本地存储？它被存储在一个页面上，尝试在另一个页面上显示。我是js的新手，不确定如何构建这些方法的语法以及如何存储它（如果可能的话）。

 $('form').submit(function() {
    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);
});   
});

这是整个内容，如果有帮助的话： http://jsfiddle.net/EUWFN/

- user1

Answer 1

由于本地存储是一个对象，因此您可以简单地遍历所有键并获取值

for (var key in localStorage) {
  console.log(key + ':' + localStorage[key]);
}

要将其打印到屏幕上，可以使用类似于以下内容的代码：

var output = ''; 

for (var key in localStorage) {
  output = output+(key + ':' +localStorage[key])+'\n';
}

$('#DivToPrintOut').html(output);

- paka

---

这会将本地存储打印到页面上还是仅在控制台中打印？ - user1

@user2912336，你可以任意打印出 localStorage[key] 的结果。例如 $('.someclass').html(localStorage['key_name']) 或者 document.write(localStorage['blahblah'])。 - user2895892

如果这些键等在单独的页面上定义了呢？ - user1

本地存储是在同一域名下所有页面中通用的。 - paka

你的控制台有没有出现任何错误？ - paka

Answer 2

如果您正在使用Chrome浏览器，请按F12打开开发者工具。

在控制台中输入localStorage并按回车键。

或者在您的js代码中放置console.log(localStorage)。

在控制台中，单击以Storage开头的行旁边的小三角形。

或在Dev Tools中：

1. 点击顶部的“资源”选项卡 2. 在左侧框架中点击“本地存储”旁边的小三角形。

- dirkdirk