LocalStorage 和 JSON.stringify JSON.parse

Question

我一直在做一个项目，允许用户提交关于他们去过的地方的记忆，并跟踪提交记忆时的位置。我唯一的问题是尝试将 localStorage 与应用程序一起使用，我阅读了有关 JSON.stringify 和 JSON.parse 的信息，但还不明白如何在我的代码中使用它们。

这是我的 form.js 它处理表单并抓取文本字段。单击添加按钮（在显示详细信息页面上）或输入详细信息按钮时，它会清除表单。最后它接收到信息并将消息发送回窗口。

 function processForm(){

var locate = document.myform.locate.value;
var details = document.myform.details.value;
var storeData = [];
localStorage.setItem("locate", JSON.stringify(locate));
localStorage.setItem("details", JSON.stringify(details));
alert("Saved: " + localStorage.getItem("locate") + ", and " + localStorage.getItem("details"));

var date = new Date,
    day = date.getDate(),
    month = date.getMonth() + 1,
    year = date.getFullYear(),
    hour = date.getHours(),
    minute = date.getMinutes(),
    ampm = hour > 12 ? "PM" : "AM";
    hour = hour % 12;
    hour = hour ? hour : 12; // zero = 12
    minute = minute > 9 ? minute : "0" + minute;
    hour = hour > 9 ? hour : "0" + hour;

    date = month + "/" + day + "/" + year + " " + hour + ":" + minute +  " " + ampm;

localStorage.setItem("date", JSON.stringify(date));

storeData.push(locate, details, date);
localStorage.setItem("storeData", JSON.stringify(storeData));
}

function clearForm(){
$('#myform').get(0).reset();
}

function retrieveFormInfo(){

var data = JSON.parse(localStorage.getItem("storeData"));

var locate = JSON.parse(localStorage.getItem("locate"));
$("#locate2").html("Place: " + locate);

var details = JSON.parse(localStorage.getItem("details"));
$("#details2").html("Description: " + details);

var date = JSON.parse(localStorage.getItem("date"));
$("#date").html(date);

}

但我遇到的主要问题是我确实知道如何使用 JSON.stringify 和 JSON.parse 正确获取该信息并将其动态地附加到带有 html 元素的窗口，主要就像一个记忆列表。

任何帮助表示赞赏！

原文由 king_sw4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

香草JS：

 var printStorageBody = function () {
    var body = document.querySelector("body");
    var pre = document.createElement("pre");
    body.innerHTML = "";
    pre.innerText = JSON.stringify(localStorage, null, '\t');
    body.appendChild(pre);
}

查询：

 var printStorageBody = function () {
    $("body").html("");
    $("<pre>")
    .text(JSON.stringify(localStorage, null, '\t'))
    .appendTo("body");
}

原文由 boubkhaled 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

localStorage 仅将键值对存储为字符串（您可以使用整数作为键，但它们会自动转换为字符串）。

存储对象是简单的键值存储，类似于对象，但它们在页面加载期间保持不变。键和值始终是字符串（请注意，与对象一样，整数键将自动转换为字符串） 参考

假设您有一个要存储的数组，其中每个项目都是一个 json 对象。

你有两个选择：

选项1：

• 将每个项目字符串化并存储在 locaStorage 中

var item = {input1: 'input1value', input2: 'input2value' };
localStorage.setItem( itemIndex, JSON.stringify(item) );

• 检索项目迭代 localStorage 项目，然后将项目转换为 JSON 对象：

 for(var i=0;i<localStorage.length; i++) {
  var key = localStorage.key( i );
  var item = JSON.parse( localStorage.getItem( key ) );
}

选项 2：

• 将整个数组字符串化并存储在 localStorage 中

  localStorage.setItem( 'memoriesdata', JSON.stringify( arr ) );

• 读取数据将项目作为字符串读取，然后转换为 JSON 对象

  var arr = JSON.parse( localStorage.getItem('memoriesdata') );

原文由 gp. 发布，翻译遵循 CC BY-SA 4.0 许可协议