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 select，用户可以在其中选择他要使用的表数据。以及将其添加到“加载任务”中，选择用户可以在何处加载任务并根据需要对其进行编辑。

这是我用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。

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

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

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());

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

1 个答案: