通过单击事件保存到本地存储

Question

你好，stackoverflow：我正在将点击事件保存到本地存储中。然而，我知道它并没有被定义为答案。这就是我迄今为止的点击事件：

$(document).ready(function() {
$(".btnlocalStorage").on("click", function() {
event.preventDefault();
console.log("I am clicked!")
var myContent = $(this).(".btnlocalStorage").val();
localStorage.setItem("myContent", myContent);
//localStorage.setItem("myContent", JSON.stringify(myContent));
})

})

这是它的HTML部分，一个按钮和一个文本区域：

<textarea type="text" class="TextBoxColors-17 form-control" id="TextBoxStorage-17" aria-label="5:00 PM" aria-describedby="inputGroup-sizing-sm"></textarea>

<button class="btn btn-primary btnlocalStorage" type="button" todo="saveToDo-11am"><i class="fa fa-floppy-o" style="font-size:18px;"></i>
</button> 

应该发生的是，当我在文本区域中键入任何内容时，当我单击保存按钮时，这些内容应该保存到本地存储中。我正在获取密钥名称，但值/内容未定义。求你了，帮我把这件事做好。谢谢

Answer 1

您正在尝试使用获取按钮的值，而不是文本区域的值

$(此(

您的代码应该如下所示：

$(document).ready(function(){
$(".btnlocalStorage").on("click", function() {
localStorage.setItem("myContent", $(".TextBoxColors-17").val());
console.log(localStorage.getItem("myContent"));
})
});

编辑：

这个代码只适用于一个特定的文本区域，如果你想让它适用于后面跟着一个按钮的多个文本区域，你必须使用：

$(this(.prve((

"这个"；是指触发事件的按钮，prev((函数允许您获取它之前的元素。

请注意，您的本地存储项目必须具有不同的名称(从一个按钮到另一个按钮(，否则所有按钮都将覆盖相同的项目内容，例如，我获取了您的文本区域的ID，但它可以是任何迭代变量：

$(document).ready(function(){
$(".btnlocalStorage").on("click", function() {
localStorage.setItem($(this).prop("id"), $(this).prev().val());
console.log(localStorage.getItem($(this).prop("id")));
})
});