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：

打开您的终端/ cmd
导航到您的网站文件所在的文件夹
在此文件夹中，运行命令php -S localhost:3000←注意大写字母'S'
打开浏览器，然后在URL栏中转到 localhost：3000 。您的网站应该在那里运行。

或

如果您的计算机上安装了Node.js：

打开您的终端/ cmd
导航到您的网站文件所在的文件夹
在此文件夹中，运行命令npm init -y
在Mac上运行npm install live-server -g或sudo npm install live-server -g
运行live-server，它将在您打开网站的同时在浏览器中自动打开一个新标签。

或

您可以使用XAMPP

注意：：请记住在文件夹的根目录中有一个index.html文件，否则您可能会遇到一些问题。

OR

可能是浏览器设置。

在Chrome中，当您转到 设置>网站设置> Cookie和网站数据 时，会有一个选项显示 允许保存网站并读取Cookie数据（推荐） 。如果将其关闭，那么您也将无法使用localStorage。

OR

如果以上方法均无法解决，那么您可能希望将保存到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)
}

重新加载页面时，localStorage返回未定义

1 个答案: