CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
YUNG FIJI
YUNG FIJI

Reputation: 1

Using jQuery for setting Local Storage Keys from Input Value

So I'm trying to start on a to do list in html5 + jQuery using Local Storage, but for some odd reason I can't get the jQuery to make a local storage key.

Here is my code. I want it to collect the value of the input box, add it to local storage, and then print the code in the div named.

$('#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;

});

and then the 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>

Upvotes: 0

Views: 684

Answers (1)

dotnetom
dotnetom

Reputation: 24901

In your code this stands for form. Local storage object is not part of the form, it is a part of window. You should change this (which represents form) to window, or remove this at all (because window.localStorage is identical to just 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;
});

Here is a working jsFiddle

Upvotes: 2

Related Questions