使用更改变量调用本地存储

Question

您好，我目前正在编写一个脚本，我想保存通过输入文本附加的表格数据，并且根据用户的选择进行自定义。

我想要做的是将该表数据保存为用户使用输入选择的变量，他可以在其中命名他创建的特定表数据。

这是我的表格和其他重要按钮的 html：

<label for="loadTask">Load Task:</label>
<label for="taskName">Task Name:</label>
<select id="loadTask" ></select>
<input type="text" id="taskName"></input>
<button type="submit" id="addTask">Add</button>

我会添加我的表格 html，但我觉得它与这个问题无关。

我想要做的是.. 当用户想要保存他的表数据时，他使用 taskName 输入并命名他希望将表数据保存为的名称，然后按下 addTask 按钮，该按钮通过以下方式保存数据对其进行字符串化。

然后我希望保存的数据出现在另一个 html 页面中的 html 选择中，用户可以在其中选择他想要使用的表格数据。以及将其添加到加载任务中，选择用户可以加载任务的位置并根据需要对其进行编辑。

这是我已经用我的 JS 尝试过的。

$(function() {
    $("#addTask").click(function() {
        let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
            return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
    });

        taskName = $("#taskName").val();
        localStorage.setItem(taskName, JSON.stringify(cells));
        alert("Task has been Added");
    });
});

然后在我尝试的另一个 html 页面中：

$(function() {
    var cells = JSON.parse(localStorage.getItem(taskName) || "[]");

    $("#select-task").append('<option>'+cells+'></option>')
})

但这显然不起作用，因为它无法识别任务名称。

我将如何更改此脚本或我应该添加什么，以便我能够将表数据保存为写入 taskName 输入的名称，并让名称显示在 html 选择中，以便用户可以选择哪些表数据他想使用并且会记住每个任务是什么，因为它们保存在他命名的名称下。

我将如何附加单元格，以便我可以删除所有表格数据，从而从所有选择中删除任务。我试过了，但它不起作用：

var tasky = loadTaskFromStorage1($("#loadTask").val());
$("#items-table").append(tasky.cells);

if ((tasky.cells[1][1]) = "") {
    delete savedTask[taskName]
}

我什至尝试更改变量 loadTaskFromStorage，因为我在另一个 JS html 文件中调用了它，但它仍然不起作用

我不能在我调用它的同一个文件中调用 localStorage 吗？

感谢您的任何帮助。

Answer 1

如果您想显示taskName 的列表，您应该从localStorage 获取所有这些列表。但是有些对象你不会认为是任务。我的建议是将任务保存在localStorage 上的新对象（或数组）中，并从该对象中查询。

$(function () {

    // Load all tasks from storage and fill the tasks dropdown
    loadAllTasks();

    $("#addTask").click(function () {
        let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
            return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
        });

        // create task object from cells
        var task = { cells: cells };

        // set name property of the task
        task.Name = $("#taskName").val();

        // call save method using the new task object
        saveTaskInStorage(task);
    });
});


function saveTaskInStorage(task) {
    // Get stored object from localStorage
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    // To be sure that object exists on localStorage
    if (!savedTasks || typeof (savedTasks) !== "object")
        savedTasks = {};

    // Set the new or exists task by the task name on savedTasks object
    savedTasks[task.Name] = task;

    // Stringify the savedTasks and store in localStorage
    localStorage.setItem('tasks', JSON.stringify(savedTasks));

    alert("Task has been Added");
}

function loadAllTasks() {

    // Get all saved tasks from storage and parse json string to javascript object
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    // To be sure that object exists on localStorage
    if (!savedTasks || typeof (savedTasks) !== "object")
        return;

    // Get all property name of savedTasks object (here it means task names)
    for (var taskName in savedTasks){
        $("#select-task").append('<option>' + taskName + '></option>')
    }
}

function loadTaskFromStorage(taskName) {
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));

    // Return the task by its name (property name on savedTasks object)
    return savedTasks[taskName];
}

您还可以使用loadTaskFromStorage(taskName) 按名称加载任务。例如：

var task = loadTaskFromStorage($("#select-task").val());