LocalStorage retrieving from arrays, confusion

Question

Getting confused, creating a web app where people post notes, I have a field for subject and one for the actual note, when posted these should be saved into two arrays, when posted these should appear almost like a comment, with what you just entered in two fields, which did work but I want people to be able to save their notes, close the browser and return, below is the code that is not working, basically the user should be able to

Allow user to enter in values.
If local storage is available, Take values saved from arrays (which I tried converting to a string then convert back to a array using JSON, which is confusing) and fill the page

$("document").ready( function (){

//Each subjectField.value goes into array
var subjectInputArray = [];
//Each noteField.value goes into array
var noteInputArray = [];

//Color array holds color hex codes as values
var noteColourArray = [];
noteColourArray[0] = "#03CEC2"; 
noteColourArray[1] = "#ADC607";
noteColourArray[2] = "#ffdd00";
noteColourArray[3] = "#f7941f";

//Variable holds properties for note creation
var noteCreate =
    {
        noteCreateContainer : $("<article>", { id: "noteCreateContainer" }),
        noteForm : $("<form>", { id: "noteFormContainer" }),
        subjectField : $("<input>", { type: "text", placeholder: "Title", id: "subject"}),
        noteField : $("<input>", { type: "text", placeholder: "Write a Note", id: "noteContent" }),
        submitNote : $("<button>", { type: "submit", id: "post", text: "post"}).on( "click", (postNote))
    }

//Variable holds properties for a note content (NOT SUBJECT);
var notePost = {}

//--------------------------------------------------------------------------------   

//Test if local storage is supported
if( Modernizr.localstorage ) {

    //Get current array/list
    localStorage.getItem("subjectInputArray")

    //Convert string back to array
    var savedNoteSubjects = JSON.parse(localStorage["subjectInputArray"]); 

    //For each item in subject localStorage array, loop through an fill page with fields containing values
    for(var i = 0; i < savedNoteSubjects.length; i++)
    {
        //Create container for post
        //Apply noteCreateContainer's selected background color to the posted note
        $("<article>").appendTo("body").addClass("notePostContainer").css("background-color", ($("#noteCreateContainer").css("background-color"))); 
        console.log("local storage: " + [savedNoteSubjects]);

        //Select last div of class notePostContainer to add input field, instead of adding 1+ input fields on each click to all classes using the same class name
        $("<input>", {class: "subjectFieldPost", type: "text", value: savedNoteSubjects[savedNoteSubjects.length-1] }).appendTo(".notePostContainer:last-child").prop("disabled", true);
    }
} else {
    alert("Your browser does not support localStorage, consider upgrading your internet browser");
}   

//--------------------------------------------------------------------------------

//Create/Set up fields required for user to input data
noteCreate.noteCreateContainer.prependTo("body");
noteCreate.noteForm.appendTo(noteCreateContainer);
//Loop through noteColourArray and append new button for each item
for (var i = 0, len = noteColourArray.length; i < len; i++) {
    noteCreate.noteForm.append($("<button>", {class: "colourSelect", value: noteColourArray[i] }).css("background-color", noteColourArray[i]).click(setBackgroundColour)) 
}
//Change background colour on click
function setBackgroundColour()
{
    $("#noteCreateContainer").css("background-color", noteColourArray[$(this).index()] )
    return false;
}
noteCreate.subjectField.appendTo(noteFormContainer);
noteCreate.noteField.appendTo(noteFormContainer);
noteCreate.submitNote.appendTo(noteFormContainer);

//--------------------------------------------------------------------------------BELOW NOTE POST/OUTPUT FROM CREATING NOTE

//FUNCTION - CREATE NEW POST UPON CLICKING POST
function postNote()
{
    //Add submitted value of subject field to array
    subjectInputArray.push( $("#subject").val() );

    //Convert array into string
    localStorage["subjectInputArray"] = JSON.stringify(subjectInputArray);

    //Add value of note field to array
    noteInputArray.push( $("#noteContent").val() );

    //Create container for post
    $("<article>").appendTo("body").addClass("notePostContainer").css("background-color", ($(noteCreateContainer).css("background-color")) ) //Apply noteCreateContainer's selected background color to the posted note

    //Select last div of class notePostContainer to add input field, instead of adding 1+ input fields on each click to all classes using the same class name
    //Pull value from local storage subject array
    $("<input>", {class: "subjectFieldPost", type: "text", value: subjectInputArray[subjectInputArray.length-1] }).appendTo(".notePostContainer:last-child").prop("disabled", true)

    //Select last div of class notePostContainer to add input field, instead of adding 1+ input fields on each click to all classes using the same class name
    $("<input>", {class: "noteFieldPost", type: "text", value: noteInputArray[noteInputArray.length-1] }).appendTo(".notePostContainer:last-child").prop("disabled", true)
    return false;
} //End function

});

An earlier post I made in relation to my idea button click temporarily changes div background color, not permanently as intended

Answer 1

var subjectInputArray = [];
...
localStorage["subjectInputArray"] = JSON.stringify(subjectInputArray);

You are setting your localStorage["subjectInputArray"] to an empty array every time your page loads.

How could you expect load anything useful from it?

Instead, try put localStorage["subjectInputArray"] = JSON.stringify(subjectInputArray); in postNote(), so every time user input something, you update the localStorage record.

Additionally,

var savedNoteSubjects = JSON.parse(localStorage["subjectInputArray"]); 

this line should be inside the test local storage if block. Don't use it until it's confirmed to be available