本地存储中的数组和对象不起作用

Question

我正在处理 TODO 列表，我正在尝试使用本地存储来完成这项工作。 但是我的代码中有一个问题我无法解决。

函数getTaskArray() 从键“tasks”下的本地存储中检索到数组。如果找不到它，它会创建一个新数组。

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

我在下面附上了我的代码的 sn-p。

提前感谢您的帮助！

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

您收到错误是因为您尝试对字符串而不是数组执行 push 函数。

当您从 localStorage 获取字符串时，您需要使用 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.");
}