Question

用户可以查看使用localStorage API存储的项目的值吗？就像饼干一样？

Answer 1

Safari和Chrome的网络检查员允许检查该数据，是的。我不确定其他浏览器是如何处理它的，但肯定不是你可以依赖于不被编辑的东西。

Answer 2

您可以轻松加载要向用户显示的项目。

在页面加载时，只需使用Javascript遍历本地存储中的所有项目......

<body>
<script language="JavaScript" type="text/javascript">
var item = "";//array to hold string values for each key value
var key ="";//array to hold string values for each key name
for (i=0;i < localStorage.length;i++) {

    var count = 0;
    if (key != "" | key != null) { //or matches what you're looking for
      item[count] = localStorage.getItem(key);
      key(i) = localStorage.key(i);
      count += 1;
    }

 }

function load_table()
{
if (item == "" || item == " " || item == null) {
document.write("<div id=\"list_table\" style=\"display: block;\">");
document.write("<h3>You have no stored items.</h3>");
document.write("</div>");
}
else {
     document.write("<div id=\"list_table\" style=\"display: block;\">");
     document.write("<h3>Stored Items</h3>");
     document.write("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");

     for (i=0;i < item.length;i++) {
          document.write("<tr><td width=\"33%\" valign=\"top\">"+item(i)+"</td>");
          document.write("<td width=\"67%\" valign=\"top\" style=\"padding-left: 0px; text-transform: capitalize;\">"+key(i)+"</td></tr>");
          }
 }


document.write("</table>");
document.write("</div> <!-- end list_table div -->");
} // end if (item != "")
} // end load_table
</script>

在html中，你可以在适当的位置粘贴一个可以显示或隐藏的div。

<div id="items_table" style="display: none;">
<script language="JavaScript" type="text/javascript">
//alert("calling load_table");
load_table();
//alert("DONE calling load_table");
</script>
</div>

如果他们点击链接，您可以显示在页面加载期间填充并隐藏的items_table。只要您没有数千个要加载的项目，它就会很快加载。

如果你愿意的话，我可以挖掘一个链接来切换块和无显示的样式显示属性。

本地存储暴露给用户

2 个答案: