Ethan Bristow Ethan Bristow -4 years ago 146
HTML Question

How to save the value of textarea to localstorage then display it in the same textarea

I'm creating a simple note storing application and would like the values of all text areas to be saved to the local storage when the user hits a save button. When the user returns I would like the textareas to display the saved notes. Below I will add the relevent code. As for now, when I reload the page the textareas aren't filled with the notes and I can't figure out why.

JSLint errors: https://gyazo.com/c2271b41e83a7d3f81ee024386832e5b

HTML:

<div id="container">
<button id="note1btn" data-role="button">Note #1</button>
<textarea id="note1input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note2btn" data-role="button">Note #2</button>
<textarea id="note2input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note3btn" data-role="button">Note #3</button>
<textarea id="note3input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note4btn" data-role="button">Note #4</button>
<textarea id="note4input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note5btn" data-role="button">Note #5</button>
<textarea id="note5input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note6btn" data-role="button">Note #6</button>
<textarea id="note6input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note7btn" data-role="button">Note #7</button>
<textarea id="note7input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note8btn" data-role="button">Note #8</button>
<textarea id="note8input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note9btn" data-role="button">Note #9</button>
<textarea id="note9input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="note10btn" data-role="button">Note #10</button>
<textarea id="note10input" class="textarea hide" rows="10" cols="50"></textarea>

<button id="savenotesbtn" data-role="button">Save</button>
</div>


JS:

$(document).ready(function () {
var savesnotesbtn = document.getElementById("savenotesbtn");

//FILL TEXT AREAS WITH NOTES
for (var i = 1; i < 11; i++) {
$("#note" + i + "input").val(localStorage.getItem("note" + i));
}


//SWIPE LEFT
$(document).on('swipeleft', '.ui-page', function (event) {
if (event.handled !== true) { // This will prevent event triggering more then once
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});

//SWIFE RIGHT
$(document).on('swiperight', '.ui-page', function (event) {
if (event.handled !== true) { // This will prevent event triggering more then once
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});

//DISPLAY NOTE
$("body").on('click', '[id^="note"]', function (e) {
$(this).next('textarea').toggleClass("hide");
});

$(".textarea").on('input', function () {
$("#savenotesbtn").addClass("notSaved");
});


savesnotesbtn.addEventListener("click", saveNotes);

});

//SAVE NOTES
function saveNotes() {
//Change styles of button
$("#savenotesbtn").removeClass("notSaved").addClass("Saved");

//Save notes in local storage
for (var i = 1; i < 11; i++) {
localStorage.getItem("note" + i, $("#note" + i + "input").val());
}

}

Answer Source

Get values by .val() instead of value (value is property from vanilla javascript, not jQuery):

$(document).ready(function () {
    var savesnotesbtn = document.getElementById("savenotesbtn");

    //FILL TEXT AREAS WITH NOTES
    for (var i = 1; i < 11; i++) {
      $("#note" + i + "input").val(localStorage.getItem("note" + i));
    }

    function saveNotes() {
      //Change styles of button
      $("#savenotesbtn").removeClass("notSaved").addClass("Saved");
      // Save data to localstorage
      for (var i = 1; i < 11; i++) {
        localStorage.setItem("note" + i, $("#note" + i + "input").val());
      }
    };
    savesnotesbtn.addEventListener("click", saveNotes);
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download