textareaの値をlocalstorageに保存して同じテキストエリアに表示する方法

Question

アプリケーションを保存する簡単なメモを作成していて、ユーザーが保存を押すとすべてのテキストエリアの値をローカルストレージに保存したいボタン。ユーザーが返ってきたら、テキストエリアに保存されたメモを表示したいと思います。以下で関連コードを追加します。今のところ、私がページをリロードすると、テキストエリアにはノートがいっぱいではなく、なぜその理由が分かりません。

JSLintエラー：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：あなたはjQueryオブジェクトに.valueを使用することはできません

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

値をで取得代わりのvalue（valueではJavaScript、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); 
}); 

Answer 2

。値を設定して取得するには、jQueryの.val()関数を使用します。たとえば ：と

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

全実施例の自動保存この次のようになります。
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()); 
    }) 
}) 

チェックアウト：http://codepen.io/NikxDa/pen/vxjgpb