Question

变得困惑，创建一个人们发布笔记的网络应用程序，我有一个主题字段和一个实际笔记字段，当发布这些应该保存到两个数组中，当发布这些应该看起来几乎像评论，用什么你刚进入两个领域，它确实有效，但我希望人们能够保存他们的笔记，关闭浏览器并返回，下面是代码不能正常工作，基本上用户应该能够

允许用户输入值。
如果本地存储可用，请从数组中保存值（我尝试转换为字符串然后使用JSON转换回数组，这会让人感到困惑）并填充页面

$("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

}）;

我之前关于我的想法的帖子 button click temporarily changes div background color, not permanently as intended

Answer 1

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

每次页面加载时，您都会将localStorage["subjectInputArray"]设置为空数组。

你怎么能期望从中加载任何有用的东西？

相反，请尝试将localStorage["subjectInputArray"] = JSON.stringify(subjectInputArray);放在postNote()中，因此每次用户输入内容时，都会更新localStorage记录。

此外，

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

此行应该在测试本地存储区域内。在确认可用之前不要使用它

LocalStorage从数组中检索，混乱

1 个答案: