Question

我正在创建一个简单的笔记存储应用程序，并希望在用户点击保存按钮时将所有文本区域的值保存到本地存储。当用户返回时，我希望textareas显示已保存的笔记。下面我将添加相关代码。至于现在，当我重新加载页面时，textareas没有填充注释，我无法弄清楚原因。

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：

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

您不能在jQuery对象上使用.value。使用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

Answer 2

按.val()代替value获取值（value是来自vanilla 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);
});

如何将textarea的值保存到localstorage然后将其显示在同一个textarea中

2 个答案: