显示保存在 Localstorage 中的 JSON 对象

Question

我正在尝试从 Web 浏览器的 localstorage 中检索 JSON 对象，然后显示这些值。我能够保存 JSON 对象，并向其推送/附加新数据。我很难弄清楚检索和显示它所需的逻辑。提供一点背景知识，变量“S”是一个总是变化的数字。时间，是点击（主要功能）发生的时间。我想把这两件事放在一起。

EX. I would like to print:
123456 - Time: 2:04
54321 - Time : 3:15

这是我保存和推送/追加的方式：

$("#oico").click(function() {
var S = window.localStorage.getItem("_snum");
var myDate = new Date();
var theDate = (myDate.getMonth()+1) + '.' + (myDate.getDate()) + '.' +     myDate.getFullYear();
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var time = h + ":" + m + ":" + s;
var obj = {};
obj[S] = time;
if (window.localStorage.getItem("_obj") === null) {
window.localStorage.setItem("_obj", JSON.stringify(obj));
} else {
    var existingEntries = JSON.parse(window.localStorage.getItem("_obj")) || [];;
    entry[S] = time;
    window.localStorage.setItem("entry", JSON.stringify(entry));
    // Save allEntries back to local storage
    existingEntries.push(entry);
    window.localStorage.setItem("_obj", JSON.stringify(existingEntries));
}
});

我正在尝试找出一种方法来打印对象“_obj”中所有 S 属性的列表。但是，由于 S 不是常量值/键，我无法弄清楚如何在列表中打印所有“S”属性及其各自的时间值。我知道我关于如何构建它的逻辑可能存在缺陷，这就是我需要帮助的原因。

Answer 1

我建议您使用 for 循环遍历您的对象。像这样，您将获得所有密钥，而无需提前知道它们的名称：

for (key in _obj) {

    alert("The current snum is: " + key);
    alert("Stored under the snum is: " + _obj[key]);

    if (key.match(/[0-9]+/)) {
       alert("Key is only numeric. It must be an snum.");
    }
}

在 Javascript 中，您的对象属性可以是任何数值：

var obj = {
  1 : 'A',
  100 : 'B',
  42 : 'C'
};

for (key in obj) {
  alert ("Key: " + key + " val: " + obj[key]);
}

编辑 14/19/07

我认为您在混淆对象或原始值的位置和原因。

如果您只想输入单个值，例如存储时间，则无需从该值中创建对象和 json。所以如果你有一个名字在S 和一个time 要存储，那么就写：

window.localStorage.setItem(S, time);

那么，由于localStorage是一个对象，你可以遍历存储的键值对，找到所有的数字和时间：

for(key in window.localStorage){
  val = localStorage.getItem(key); 
  alert("Number: " + key + " time: " + val);
}

但是如果您打算创建一个对象并将其存储为 json，那么您应该为该对象选择一个唯一的名称，存储它，稍后读取并在存储时再次更改它唯一的名称。像这样：

// Read the object to be added a new property
var myObjectJson = window.localStorage.getItem("MyObjectXY");
var myObject = JSON.parse(myObjectJson);

// Add a new key value pair
myObject[S] = time; 

// Store the object
window.localStorage.setItem("MyObjectXY", JSON.stringify(myObject));

如果您像这样工作，您希望遍历对象，而不是遍历存储项。

为了看得更清楚，这里是JSFiddle。它只是允许存储键值对。

为了避免本地存储命名空间污染，我推荐第二种方法，存储一个对象。命名空间污染导致难以发现的错误。