如何将文本区域的值保存到本地存储中，然后在同一个文本区域中显示它
如何将文本区域的值保存到本地存储中，然后在同一个文本区域中显示它
提问于 2017-03-22 21:35:56
我正在创建一个简单的便笺存储应用程序，并希望当用户点击“保存”按钮时，将所有文本区域的值保存到本地存储。当用户返回时，我希望文本区域显示保存的注释。下面我将添加相关代码。现在，当我重新加载页面时，文本区域没有被注释填充，我也不知道为什么。
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>联署材料：
$(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());
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-22 21:50:42
通过.val()而不是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);
});Stack Overflow用户
发布于 2017-03-22 21:40:43
不能在.value对象上使用jQuery。使用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>联署材料：
$(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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42963091
复制相关文章
相似问题
腾讯云开发者
