javascript - 重新加载页面时 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');
}

OR

您可能正在尝试在本地计算机上使用localStorage。出于安全原因，它不会工作。您可能需要做的是在本地服务器上运行它。您可以按照以下步骤进行操作。

如果您的计算机上安装了 PHP:

1. 打开您的终端/cmd
2. 导航到您的网站文件所在的文件夹
3. 在此文件夹中，运行命令 php -S localhost:3000 ← 注意大写“S”
4. 打开浏览器并在地址栏中转至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 文件，否则您可能会遇到一些问题。

OR

可能是浏览器设置。

在 Chrome 中，当您转到设置 > 网站设置 > Cookie 和网站数据时，会出现一个选项，显示允许网站保存并读取cookie数据(推荐)。如果关闭该功能，您也将无法使用 localStorage。

OR

如果以上方法都不能解决问题，那么您可能需要将保存到 localStorage 的函数包装在 try-catch block 中，并查看是否返回错误并从那里获取它:

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)
}