弹出窗口保存在本地存储中

Question

I still try to make local storage for sticky notes. I want to auto-view (open) all before opened sticky when page will be refreshed so long untill they will be closed by ESC. Closing by ESC work, but local storage can`t save sticky...

https://jsfiddle.net/venntr/14fs0fef/3/

if (localStorage["note"])
{
    var user = localStorage["note"] ;
    document.getElementById("note").value = user ;
}
else
{
    document.getElementById("note").placeholder = "notes" ;
    console.log("notes not found in localStorage")
}

document.getElementById("save").addEventListener("click", function ()
{
    var user = document.getElementById("note").value ;
    localStorage.setItem("note", note) ;
    alert("note id saved") ;
} , false);

function closeIt(that) {
    var cls = parseInt(that.parent().parent().attr('class').split(' ')[1]);
    var index = arr.indexOf(cls);
    console.log('.note.'+cls+' '+index);
    arr.splice(index,1);
    that.parent().parent().remove();
}

Answer 1

There's a couple problems with your solution. Firstly, the click event to save the note is not working because the selector is giving an error because it can't find an id of 'save' on the page when it first loads (because a sticky note hasn't been created yet). Since you're already using jQuery, you should use it for all your selectors, as it doesn't have this issue.

$(document).on("click", 'button.savebutton', function ()
{
    var note = document.getElementById("note").value ;
    localStorage.setItem("note", note) ;
    alert("note id saved") ;
});

Secondly, when you set the value of the textarea using jQuery, you need to use the 'val' method:

$("textarea#note").val(note);

However, this still won't get you where you want, as when the page loads, there is no sticky notes to load your values into yet (unless you have more code you haven't showed). You'll need to loop over your values returned from local storage and dynamically create your sticky notes from them. Something like:

for (var i = 0; i < notes.length;i++) {
        addNote(notes[i]);
}

where addNote should be a function where you create a new sticky note as you do in your 'Add Sticky Note' button click event.

Edit:

One more issue, your solution only allows for saving one sticky note, as the save click event is writing over anything else you've already put in localstorage. You need to either have unique names for each sticky in local storage (ie 'note1', 'note2'), or a better solution may be to have a master save button on the page that will save all stickys. Then you could loop through them and save them all as a JSON array in localstorage :

localStorage.setItem('notes', JSON.stringify(noteArray));

You could actually forgo a save button entirely and save everything when the use exits the page:

$(window).on('beforeunload', function() {
       //loop over notes and put in array
       //stick json array in localstorage
});