Using jQuery for setting Local Storage Keys from Input Value

Question

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>

krivtom · Accepted Answer · 2015-10-14 04:09:08Z

2

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

edited Oct 14, 2015 at 4:09

answered Oct 14, 2015 at 3:41

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using jQuery for setting Local Storage Keys from Input Value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related