Question

您好，我目前正在使用一个脚本，该脚本获取您的表数据并将其保存在本地存储中，并在另一个js文件中调用它。

我有一个脚本可以成功地完全按照自己的意愿保存表数据，但是在将数据保存到本地存储之前，我一直在努力实现对表中有多少表行的计数。

这是我尝试过的：

$(function() {

  loadAllTasks();

  $("#addTask").click(function() {
    let cells = Array.prototype.map.call($("#items-table")[0].rows, row => {
      return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
    });
    var task = {
      cells: cells
    };
    task.Name = $("#taskName").val();
    var itemCount = $("#items-table tr").length - 1;

    var count = {
      itemCount: itemCount
    };
    saveTaskInStorage(task);
    saveCountInStorage(count);

  });

  function saveTaskInStorage(task) {
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (!savedTasks || typeof(savedTasks) !== "object")
      savedTasks = {};
    savedTasks[task.Name] = task;
    localStorage.setItem('tasks', JSON.stringify(savedTasks));

    alert("Task has been Added");
  }
  function saveCountInStorage(count) {
    var savedCount = localStorage.getItem('counts')
    savedCount = {};
    savedCount[task.Name] = count;
    localStorage.setItem('counts', savedCount);
  }

  function loadCountFromStorage1(taskName) {
   var savedCount = localStorage.getItem('counts');
    return savedCount[taskName];
  }

  function loadAllTasks() {
    var savedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (!savedTasks || typeof(savedTasks) !== "object")
      return;
    for (var taskName in savedTasks) {
      $("#loadTask").append('<option>' + taskName + '</option>')
    }
  }

});

function loadTaskFromStorage1(taskName) {
   var savedTasks = JSON.parse(localStorage.getItem('tasks'));
    return savedTasks[taskName];
}

然后在另一个js文件中，我将这些函数称为：

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];
}

function loadCountFromStorage(taskName) {
   var savedCount = localStorage.getItem('counts');
    return savedCount[taskName];
}

loadAllTasks();

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

然后我就这样做：

alert(task.cells);

这很完美，它会警告我保存的表中所有自定义保存的数据。

然后我为此尝试了许多不同的选择：

alert(task.itemCount);

以及其中的一些变化。

我希望能够做到：

alert(task.count);

然后这将提醒我当前在选择html中选择的已保存任务的表中的行数。

我还尝试摆脱了saveCount函数，只是对其进行了修改：

var task = {
  cells: cells,
  count: count
};

但不幸的是，这也不起作用。

如果有人能帮助我将表行数保存在本地存储中，并能够在html / js文件中的select中的每个不同的已保存任务上调用它，我将不胜感激。

每个保存的任务将具有不同的计数，因此我想执行task.count

感谢帮助<3！

Answer 1

您应该真正考虑使用React或Angular之类的前端框架。当您真正需要的是数据驱动的内容时，您将遍历dom元素并将其内部html保存为任务中的值。但是，我认为这可能会解决您的问题。

在#addTask的点击处理程序中，您拥有

let cells = Array.prototype.map.call($("#items-table")[0].rows, row => {
  return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
var task = {
  cells: cells
};

尝试在此处添加计数器

let count = 0;     
let cells = Array.prototype.map.call($("#items-table")[0].rows, row => {
  count += 1;
  return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
var task = {
  cells: cells
  count: count
};

希望对您有用

将表行数保存在本地存储中

1 个答案: