使用 jQuery 从输入值设置本地存储键答案

【问题标题】：Using jQuery for setting Local Storage Keys from Input Value使用 jQuery 从输入值设置本地存储键
【发布时间】：2016-01-12 00:02:31
【问题描述】：

所以我尝试使用本地存储在 html5 + 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>

【问题讨论】：

标签： javascript jquery html local-storage

【解决方案1】：

在您的代码中，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

【讨论】：