在本地存储中保存表行数

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

希望这对你有用