I am getting this error when I ran my todo app. Here is the error,

localStorage.getItem(...).key is not a function

Here is the code,

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));


        var i;
        while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(localStorage.getItem("todo").key(i));
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i;
    while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

Edit: I have updated my code. It does not show any error but it doesn't show todo items.

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));

        var data;
        data = localStorage.getItem("todo");
        var i;
        while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });
    var data=localStorage.getItem("todo")
    var i;
    while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

Edit 2: I was able to make the page work with below updates,

$(document).ready(function(){
    var count=localStorage.length;// get count
    console.log($('.data').val());  // whats in the todo 0
    console.log(localStorage.length); // how much data is in the storage

    var data = new Array();

    var i=0;
        while (i<localStorage.length) {
            data[i]=localStorage.getItem('todo'+i);
            console.log(data[i]);
            i++;
        }
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      
        data.push($('.data').val());
        localStorage.setItem("todo"+count,$('.data').val());
        count++;
        var i=0;
        $(".todorow").addClass("hide");
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i=0;
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

});

I am getting this error when I ran my todo app. Here is the error,

localStorage.getItem(...).key is not a function

Here is the code,

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));


        var i;
        while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(localStorage.getItem("todo").key(i));
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i;
    while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

Edit: I have updated my code. It does not show any error but it doesn't show todo items.

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));

        var data;
        data = localStorage.getItem("todo");
        var i;
        while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });
    var data=localStorage.getItem("todo")
    var i;
    while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

Edit 2: I was able to make the page work with below updates,

$(document).ready(function(){
    var count=localStorage.length;// get count
    console.log($('.data').val());  // whats in the todo 0
    console.log(localStorage.length); // how much data is in the storage

    var data = new Array();

    var i=0;
        while (i<localStorage.length) {
            data[i]=localStorage.getItem('todo'+i);
            console.log(data[i]);
            i++;
        }
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      
        data.push($('.data').val());
        localStorage.setItem("todo"+count,$('.data').val());
        count++;
        var i=0;
        $(".todorow").addClass("hide");
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i=0;
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

});

• javascript
• html

• 4 Yes? localStorage.getItem(...) returns a string, strings don't have .key(). – Amadan Commented Jun 13, 2018 at 14:57
• 3 What do you expect .key(i) to mean? Your code does not even initialize i to any value. – Pointy Commented Jun 13, 2018 at 14:58
• Also getItem can also return null, null has no .key() either.. :) – Keith Commented Jun 13, 2018 at 15:01
• I have updated my code but it doenst work still. – user379888 Commented Jun 13, 2018 at 15:10
• Is this part: localStorage.setItem("todo", JSON.stringify($('.data').val())); setting a single item or an array of items? What is the output of JSON.stringify($('.data').val()) ? – Mike B. Commented Jun 13, 2018 at 18:55

3 Answers 3

localStorage.setItem() works with strings only. So when you're calling localStorage.setItem('todo', somedata) it is replacing the 'todo' value, not adding to it.

Similarly, localStorage.getItem() returns strings (or null - so check for that too).

If you want to use localStorage for a list of todos, something like the following may work...

// Save your todos array:
var todos = [];  // Empty array if no todos, or you could have todo data already.
localStorage.setItem('todos', JSON.stringify(todos));


// Load your todos array:
var loadedTodos = JSON.parse(localStorage.getItem('todos'));

var specificTodo = loadedTodos[4];  // Get a specific todo by array index
specificTodo.title = 'abcd';  // Access props
specificTodo.pleted = false;  // Access props


// To add a new item to your list of stored todos:
var todos = JSON.parse(localStorage.getItem('todos'));  // Load the array
todos.push({ title: 'Do some stuff', pleted: false });  // Add to the array
localStorage.setItem('todos', JSON.stringify(todos));  // Save the array

if localStorage.getItem('todo') returning an object so if you want to access a property of this object you should parse it first parse(localStorage.getItem("todo"))

then if you need to access a property using a variable you have to use [] notation instead of . notation like

var obj = JSON.parse(localStorage.getItem("todo"));
obj[key(i)]

and finally if you want to loop through an object you have to use for of instead of while

There were several issues with the code. I was able to make it work with the below tweaks,

$(document).ready(function(){
    var count=localStorage.length;// get count
    console.log($('.data').val());  // whats in the todo 0
    console.log(localStorage.length); // how much data is in the storage

    var data = new Array();

    var i=0;
        while (i<localStorage.length) {
            data[i]=localStorage.getItem('todo'+i);
            console.log(data[i]);
            i++;
        }
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      
        data.push($('.data').val());
        localStorage.setItem("todo"+count,$('.data').val());
        count++;
        var i=0;
        $(".todorow").addClass("hide");
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i=0;
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

});