在本地存储中保存表行数

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 文件的选择中的每个不同保存的任务上调用它，我将不胜感激。

每个保存的任务都有不同的计数，所以我想做 task.count

感谢您的帮助

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

希望对你有用