localStorage возвращает неопределенный при перезагрузке страницы

Question

Я сохраняю массив в localStorage, но когда я пытаюсь извлечь данные из него, возвращаем неопределенное значение. Затем я вызываю функцию retreiveData для отображения данных.

let LIST, id;

if (localStorage.getItem('todo')) {
    LIST = JSON.parse(localStorage.getItem('todo'));
    id = LIST.length;
    retreiveData(LIST);
} else {
    LIST = [];
    id = 0;
}

function retreiveData(arr) {
    arr.forEach(el => {
        addToDo(el.toDo, el.id, el.done, el.trash);
    });
}

function addToDo(toDo, id, done, trash) {

    if (trash) { return; }

    const DONE = done ? check : unCheck;

    const newHTML = `
                <li class="item">
                ${toDo} <i class="${DONE} checked" data-task="complete" id="${id}"></i>
                <i class="ion-ios-trash-outline icon" data-task="delete" id="${id}"></i>
            </li> `;

    list.insertAdjacentHTML('beforeend', newHTML);
}

document.getElementById('listBtn').addEventListener('click', event => {
    event.preventDefault();

    const toDo = input.value;

    if (toDo) {
        addToDo(toDo, id, false, false);
        LIST.push({
            name: toDo,
            id: id,
            done: false,
            trash: false

        });
    }
    localStorage.setItem('todo', JSON.stringify(LIST));

    input.value = '';
    id++;

});



function markAsDone(element) {


    element.classList.toggle(check);
    element.classList.toggle(unCheck);

    LIST[element.id].done = LIST[element.id].done ? false : true;
}

function deleteToDo(element) {
    element.parentNode.parentNode.removeChild(element.parentNode)

    LIST[element.id].trash = true;

}


list.addEventListener('click', event => {

    const element = event.target;
    const elementID = element.id;

    if (element.dataset.task == 'delete') {
        deleteToDo(element);
    } else if (element.dataset.task == 'complete') {
        markAsDone(element);
    }
    localStorage.setItem('todo', JSON.stringify(LIST));

});

Answer 1

Может ли быть так, что функция retrieveData() равна undefined, а не localStorage.todos?
Попробуйте что-то вроде этого:

let list = [ { "name": "Do shopping ", "id": 0, "done": false, "trash": false }, { "name": "work on project", "id": 1, "done": false, "trash": false } ];

localStorage.todo = JSON.stringify(list);

let theData;
if (localStorage.todo) {
    theData = JSON.parse(localStorage.todo)
    console.log(theData);
} else {
    console.log('No todos');
}

ИЛИ

Возможно, вы пытаетесь использовать localStorage на ваша локальная машина. По соображениям безопасности это не сработает. Вам может понадобиться запустить его на локальном сервере. Это можно сделать, выполнив следующие действия.

Если на вашем компьютере установлено PHP:

1. Откройте терминал / cmd
2. Перейдите в папка с файлами вашего сайта
3. В этой папке введите команду php -S localhost:3000 ← Обратите внимание на заглавную 'S'
4. Откройте браузер и в строке URL go to локальный: 3000 . Ваш сайт должен работать там.

или

Если на вашем компьютере установлено Node.js:

1. Откройте терминал / cmd
2. Перейдите в папку, где находятся файлы вашего веб-сайта
3. . В этой папке введите команду npm init -y
4. Выполнить npm install live-server -g или sudo npm install live-server -g на компьютере c
5. Запустите live-server, и он автоматически откроет новую вкладку в браузере с открытым вашим сайтом.

или

You можно использовать XAMPP

ПРИМЕЧАНИЕ: не забудьте иметь индексный файл. html в root вашей папки, иначе у вас могут возникнуть некоторые проблемы.

ИЛИ

Это могут быть настройки браузера.

В Chrome, когда вы go в настройки> настройки сайта> файлы cookie и данные сайта , есть опция, которая говорит Разрешить сайтам сохранять и считывать данные повара ie (рекомендуется) . Если это отключено, то вы также не сможете использовать localStorage.

ИЛИ

Если ничего из вышеперечисленного не исправляет, тогда вы можете захотеть обернуть сохраняющую функцию в localStorage в блоке try-catch и посмотреть, будет ли возвращена ошибка, и взять ее оттуда:

let list = [ { "name": "Do shopping ", "id": 0, "done": false, "trash": false }, { "name": "work on project", "id": 1, "done": false, "trash": false } ];

try {
  localStorage.todo = JSON.stringify(list);
} catch(error) {
  alert(error)
}