重新加載頁面時，localStorage 返回 undefined

Question

我將數組保存在localStorage中，但是當我嘗試從中檢索數據時返回未定義。 然后我調用retreiveData function 來顯示數據。

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() function 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 到localhost:3000 。 您的網站應該在那里運行。

或者

如果您的計算機上安裝了 Node.js：

1. 打開你的終端/cmd
2. 導航到您的網站文件所在的文件夾
3. 在此文件夾中，運行命令npm init -y
4. 在 Mac 上運行npm install live-server -g或sudo npm install live-server -g
5. 運行live-server ，它應該會自動在瀏覽器中打開一個新選項卡，同時打開您的網站。

或者

您可以使用XAMPP

注意：請記住在文件夾的根目錄中有一個 index.html 文件，否則您可能會遇到一些問題。

或者

可能是瀏覽器設置。

在 Chrome 中，當您 go 到settings > site settings > cookies and site data時，有一個選項顯示Allow sites to save and read cookie data (recommended) 。 如果將其關閉，那么您也將無法使用 localStorage。

或者

如果上述方法均未修復，那么您可能需要將保存到localStorage的 function 包裝在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) }