CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
Xander
Xander

Reputation: 1011

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

    }

Upvotes: 0

Views: 4263

Answers (2)

NikxDa
NikxDa

Reputation: 4187

You cannot use .value on a jQuery object. Use jQuery's .val() function to set and get the value instead. For example: 

$("#note1input").val(localStorage.getItem ("abc")); //Get
localStorage.setItem ($("#note1input").val()); //Set

Full working example with auto-save would be this:
HTML:

<input data-store="1"></input>
<input data-store="2"></input>
<input data-store="3"></input>
<input data-store="4"></input>
<input data-store="5"></input>

JS: 

$(document).ready (function () {
  $("*[data-store]").each(function () {
    $(this).val(localStorage.getItem("item-" + $(this).attr("data-store")));
  });

  $("*[data-store]").on("keyup", function (itm) {
    localStorage.setItem ("item-" + $(this).attr("data-store"), $(this).val());
  })
})

Check out: http://codepen.io/NikxDa/pen/vxjgpb

Upvotes: 3

br3t
br3t

Reputation: 1658

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

Upvotes: 1

Related Questions