Question

我正在制作TODO列表，我正在努力使本地存储工作。但我的代码中有一个问题我无法解决。

函数getTaskArray()在关键任务下检索了本地存储中的数组。如果它找不到它，则改为创建一个新数组。

pushData()函数应该将任务对象推送到数组中。但是我收到以下错误：taskArray.push is not a function。

我在下面附上了我的代码片段。

提前感谢您的帮助！

var taskArray;
function getTaskArray() {
    var taskArrayString = localStorage.getItem("tasks");
    if (taskArrayString !== null && typeof taskArrayString === "string") {
        taskArray = taskArrayString;
        console.log("Succesfully retrieved 'tasks' and contents.");
    } else {
        console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array");
        var emptyArray = JSON.stringify(new Array());
        localStorage.setItem("tasks", emptyArray);
        taskArray = localStorage.getItem("tasks");
    };
};

var taskString;

function pushData() {
    taskString = JSON.stringify(taskObject);
    taskArray = taskArray.push(taskString);
};

更新

我的代码的完整版本：

// All functions
var taskFromHtml;
var priorityFromHtml;

function getTaskInput() {
    try {
        taskFromHtml = $("#taak").val();
        priorityFromHtml = $("#prioriteit").val();
        console.log("Succesfully retrieved data. Task: " + taskFromHtml + ". Priority: " + priorityFromHtml + ".");
    } catch(e) {
        console.log("Failed to retrieve data, unexpecter error.");
    };
};

var taskObject;
function taskToObject() {
    taskObject = {
        task: taskFromHtml,
        priority: priorityFromHtml,
        finished: false
    }; 
};

var taskArray;
function getTaskArray() {
    var taskArrayString = localStorage.getItem("tasks");
    if (taskArrayString !== null && typeof taskArrayString === "string") {
        taskArray = JSON.parse(taskArrayString); // <------
        console.log("Succesfully retrieved 'tasks' and contents.");
    } else {
        console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array");
        var emptyArray = JSON.stringify(new Array());
        localStorage.setItem("tasks", emptyArray);
        taskArray = localStorage.getItem("tasks");
        taskArray = JSON.parse(taskArray); // <------
    };
};

var taskString;

function pushData() {
    taskString = JSON.stringify(taskObject);
    taskArray = taskArray.push(taskString);
};

它的HTML：

  <form id="todoInsert" action="#">
        <input type="text" name="task" id="taak">
        <select id="prioriteit">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        <input type="submit" id="formSubmit">
    </form>
    <div id="addItem">+</div>

Answer 1

您收到错误是因为您尝试在String而不是数组上执行push函数。

当您从localStorage获取String时，您需要使用JSON.parse()解析它。

taskArray = JSON.parse( localStorage.getItem("tasks"));

此外，当您在if部分成功收到

时

taskArray = JSON.parse(taskArrayString);

您的完整工作代码将是：

var taskArray;
function getTaskArray() {
    var taskArrayString = localStorage.getItem("tasks");
    if (taskArrayString !== null && typeof taskArrayString === "string") {
        taskArray = JSON.parse(taskArrayString); // <------
        console.log("Succesfully retrieved 'tasks' and contents.");
    } else {
        console.log("Succesfully retrieved 'tasks', contents were not a string or held no contents. Contents of 'tasks' reset to empty array");
        var emptyArray = JSON.stringify(new Array());
        localStorage.setItem("tasks", emptyArray);
        taskArray = localStorage.getItem("tasks");
        taskArray = JSON.parse(taskArray); // <------
    };
};

var taskString;

function pushData() {
    taskString = JSON.stringify(taskObject);
    taskArray.push(taskString); // <----- !No need to assign there.
};

在这里你可以看到一个有效的JsFiddle：https://jsfiddle.net/txvp9uwc/2/

Answer 2

您只能以字符串格式将数据保存在本地存储中。您无法保存，日期，数字或任何其他数据类型。为此，您可以将数据序列化和反序列化为JSON字符串，然后保留数据。

有一些很棒的包装库可供您使用：https://github.com/nbubna/store或https://github.com/marcuswestin/store.js/

<强>更新

在使用之前，您需要在检索后反序列化字符串：

var taskArrayString = localStorage.getItem("tasks");
if (taskArrayString !== null && typeof taskArrayString === "string") {
    taskArray = JSON.parse(taskArrayString);   // deserializing here
    console.log("Succesfully retrieved 'tasks' and contents.");
}

localstorage中的数组和对象不起作用

2 个答案: