使用jQuery从输入值设置本地存储密钥

问题描述：

所以我试图开始做一个使用本地存储的html5 + jQuery的列表，但由于一些奇怪的原因，我无法让jQuery制作本地存储键。使用jQuery从输入值设置本地存储密钥

这是我的代码。我希望它收集输入框的值，将其添加到本地存储，然后打印名为div的代码。

$('#taskEntryForm').submit(function() { 

    if ($('#taskInput').val() !== '') { 

     var input_value = $('#taskInput').val(); 
     var stored_input = this.localStorage.setItem('task_',input_value); 
     var task = this.localStorage.getItem('task_'); 
     $('#taskList').append("<br>"+task); 


    }; 

    return false; 

});

，然后将HTML ...

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="shit.js"></script> 
</head> 
<div id="cNew"> 
<form id="taskEntryForm"> 
<input id="taskInput" name="taskInput" autofocus></form> 
</div> 
<div id="taskList"></div> 
</html>

答

在你的代码this代表形式。本地存储对象不是表单的一部分，它是window的一部分。你应该改变this（表示形式）window，或根本去除this（因为window.localStorage是相同的，只是localStorage）：

$('#taskEntryForm').submit(function() { 
    if ($('#taskInput').val() !== '') { 
     var input_value = $('#taskInput').val(); 
     var stored_input = localStorage.setItem('task_',input_value); // <- removed 'this' 
     var task = localStorage.getItem('task_'); // <- removed 'this' 
     $('#taskList').append("<br>"+task); 
    }; 
    return false; 
});

这里是一个工作jsFiddle

使用jQuery从输入值设置本地存储密钥

相关推荐