сохранить количество строк таблицы в локальном хранилище

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

Спасибо за помощь <3! </p>

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

Надеюсь, что это работает для вас