Question

所以我尝试使用本地存储开始使用html5 + jQuery中的待办事项列表，但由于某些奇怪的原因，我无法使jQuery创建本地存储密钥。

这是我的代码。我希望它收集输入框的值，将其添加到本地存储，然后在名为div的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>

Answer 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

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

1 个答案: