localStorage.getItem (...). ключ не является функцией

Question

Я получаю эту ошибку, когда запускаю приложение todo.Вот ошибка,

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

Вот код,

$(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++;
    }

});

Редактировать: Я обновил свой код.Он не показывает никаких ошибок, но не отображает элементы задач.

$(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++;
    }

});

Редактировать 2: я смог заставить страницу работать с обновлениями ниже,

$(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++;
        }

});

Answer 1

localStorage.setItem() работает только со строками.Поэтому, когда вы вызываете localStorage.setItem('todo', somedata), это , заменяющее значение 'todo', а не добавляющее к нему.

Аналогично, localStorage.getItem() возвращает строки (или ноль - так что проверьте этотоже).

Если вы хотите использовать localStorage для списка задач, может сработать что-то вроде следующего ...

// 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.completed = 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', completed: false });  // Add to the array
localStorage.setItem('todos', JSON.stringify(todos));  // Save the array

Answer 2

Было несколько проблем с кодом.Я смог заставить его работать с приведенными ниже настройками,

$(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++;
        }

});

Answer 3

если localStorage.getItem('todo') возвращает объект, поэтому, если вы хотите получить доступ к свойству этого объекта, вы должны сначала проанализировать его parse(localStorage.getItem("todo"))

, а затем, если вам нужно получить доступ к свойству с помощью переменной, которую вы должны использовать[] нотация вместо . нотация типа

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

и, наконец, если вы хотите перебрать объект, вы должны использовать for of вместо while