LocalStorage和JSON.stringify JSON.parse [英] LocalStorage and JSON.stringify JSON.parse

问题描述

我一直致力于一个项目，该项目允许用户提交有关他们访问过的地点的记忆，并跟踪记录提交时间的位置。我唯一的问题是尝试将localStorage与app一起使用，我读到了JSON.stringify和JSON.parse，并且还不了解如何在我的代码中使用它们。

I have been working on a project that allows the user to submit memories about a place they have visited and tracks the location of when the memory was submitted. My only problem is trying to use localStorage with the app, I read about the JSON.stringify and JSON.parse, and don't understand how to use them in my code yet.

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

This is my form.js It processes the form and grabs the text fields. It clears the form when the add button(on the display details page) or the enter details button is clicked. Finally it receives the information and sends out the message back to the window.

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元素的窗口中，主要类似于记忆列表。

But the major problem I am running into is I do know how to take that information in correctly using the JSON.stringify and JSON.parse and appending it to the window with html elements dynamically, Mainly like a list of memories.

任何感谢帮助！

推荐答案

Vanilla JS

Vanilla 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);
}

jQuery

jQuery

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

这篇关于LocalStorage和JSON.stringify JSON.parse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！