javascript - 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 元素的窗口，主要就像一个内存列表。

感谢任何帮助!

Answer 1

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

Storage objects are simple key-value stores, similar to objects, but they stay intact through page loads. The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings) reference

假设您有一个要存储的数组，其中每个项目都是一个 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') );