LocalStorage and JSON.stringify JSON.parse

Question

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.

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

}

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.

Any help is appreciated!

Answer 1

localStorage stores key value pairs as strings only (you can use integer for keys but they get converted to string automatically).

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

let's say you have an array to be stored with each item being a json object.

You got 2 options:

Option 1:

• stringify every item and store in locaStorage

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

• to retrive the items iterate over localStorage items and then convert the item to JSON object:

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

Option 2:

• stringify the entire array and store in localStorage

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

• to read the data read the item as string then convert to JSON object

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