Проблема с сохранением данных таблицы в файл cookie и извлечения этой таблицы и ее данных

Question

Я пытаюсь сохранить данные таблицы в файле cookie и получить доступ к ним позже.Мой вопрос очень похож на Установить и загрузить данные таблицы с cookie , но он не отвечает на мою проблему (я пробовал это решение, но оно не работало).Это из старого задания колледжа, но сейчас я работаю над личным проектом, но он очень похож на куки.Мой код хорошо прокомментирован в функциях cookie, но если потребуется дополнительная информация, дайте мне знать!заранее спасибо

Ссылка: https://jsfiddle.net/16398101/cq3ob458/

function setCookie() {
//using ~ to seperate values as , and ; are doing weird things to cookies (explained better below)
  document.cookie += '~ expires=Thu, 01 Jan 1970 00:00:01 GMT'; // trying to reset cookie each time we enter this function as table could be saved multiple times per session

  var d = new Date(); //get date
  d.setTime(d.getTime() + (60 * 24 * 60 * 60 * 1000)); // about 2 months in future
  var expires = "expires=" + d.toUTCString();
  var table = document.getElementById("mytab");

  var r = table.rows.length;

  var c = table.rows[0].cells.length;

  var s1 = r + "~" + c + "~"; // get len of rows and cols to add them later
  /* using "~" as "," or ";" made the splitting act weird
                              e.g would add entire cookie into first cell of table*/
  for (var i = 1; i < table.rows.length; i++) {
    for (var j = 0; j < table.rows[i].cells.length; j++) {
      s1 += table.rows[i].cells[j].innerHTML + "~"; //get data from table
    }
  }
  s1 += expires; //add expiration date
  document.cookie = s1;
  console.log("logging s1 " + s1); //cookie looks good until here

}



function getCookie() {
  console.log("In GetCookie");
  var table = document.getElementById("mytab");
  var x = document.cookie;
  console.log("logging x" + x);

  var x1 = x.split("~");

  var r = x1[0];
  var c = x1[1];

  for (var i = 0; i < (r - 2); i++) { // add rows (-2 as already two rows)
    addRow();
  }

  for (var j = 0; j < (c - 4); j++) { // add rows (-4 as already four cols)
    addCol();
  }

  /*   if (x1[0].indexOf("~") > -1) {
      x1[0] = "Student Name";
    }
     */
  var count = 0;
  for (var p = 1; p < table.rows.length; p++) { // row 0 is header therefore ignore
    for (var o = 0; o < table.rows[i].cells.length; o++) { //cols start at 0

      table.rows[p].cells[o].innerHTML = x1[count + 2]; // +2 as 0 and 1 are rows and cols len

      console.log("logging x1[count]" + x1[count]);
      count++;
      add();
    }
  }
}

Я пробовал несколько различных решений здесь и на других сайтах, но ни одно из них не работает

Я ожидаю таблицыбыть восстановленным до состояния, в котором оно находилось, когда оно было сохранено, но в данный момент оно заполняет таблицу «неопределенным» или пометкой, или весь файл cookie в первой ячейке и т. д. (несколько результатов от нескольких разных неудачных решений)

Примечание: код написан на vanilla js, но jQuery или любое другое решение подойдет

Answer 1

Вам нужно отправить содержимое таблицы на ваш сервер?Если нет, рассмотрите возможность использования localStorage вместо cookie-файлов - проще получать значения из localStorage, когда они вам нужны.

Кроме того, вы можете просто сохранить / восстановить весь innerHTML узла таблицы вместо создания собственногостроковое представление содержимого таблицы.Пример:

localStorage.table = document.querySelector('#mytab').innerHTML.trim() // store

document.querySelector('#mytab').innerHTML = localStorage.table // restore

Answer 2

Вот еще одна идея для вас:

Я предполагаю, что ваши данные находятся в форме объекта, если это так, просто используйте JSON.stringify(table);.Он вернет строковую версию вашего объекта, а затем вы можете сохранить его как файл cookie, используя document.cookie() или window.localStorage() (что я предпочитаю).И когда вы получите его, он будет в строковом формате, поэтому чтобы переключить его обратно на объект, просто используйте JSON.parse(objString).

Надеюсь, что это поможет !!!