Загрузить таблицу из сохраненного файла cookie

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

Мне удалось сохранить данные в cookie, но функция загрузки не работает.

Есть идеи, как я могу заставить эту работу работать?

По сути, я хочу, чтобы cookie сохранял данные в таблице с помощью кнопки «Сохранить». Затем вы можете возиться с таблицей, и кнопка «загрузить» вернет ее к тому состоянию, в котором она выглядела при сохранении.

<html>
<head>
</head>
<body>

<table style = "width:100%" id = "myTable">
   <tr>
    <th>Col 1</th>
    <th >Col 2</th> 
    <th >Col 3</th>
    <th>Col 4</th>
  </tr>
  <tr>
    <td contenteditable = "true" id = "left">-</td>
    <td contenteditable = "true" id = "left">-</td>
    <td contenteditable = "true">-</td>
    <td>-</td>
  </tr>

</table>
<p id = "paragraph">

</p>

<button type= "submit" class = "button" onclick = "addRow()">
  Add Row
</button>

<button type= "submit" class = "button" onclick = "addCol()">
  Add Col
</button>

<button type= "submit" class = "button" onclick = "saveTable()">
  Save
</button>

<button type= "submit" class = "button" onclick = "LoadTable()">
  Load
</button>

<script>
function addRow()
{
    var table = document.getElementById("myTable");
  var endOfRows = table.rows.length; // length of rows
  var row = table.insertRow(endOfRows);
  var endOfCols = table.rows[0].cells.length; // end of cols

  for(var i = 0; i< endOfCols; i++)
  {
    var cell = row.insertCell(i);
        cell.innerHTML = "-";
    if ( i == endOfCols-1)
    {
        cell.contentEditable = "false";
    }
    else
    {
        cell.contentEditable = "true";
    }

    if (i > 1)
    {
        cell.style.textAlign = "right";
    }
    else
    {
        cell.style.textAlign = "left";
    }
  }
}
function addCol()
{
    var table = document.getElementById("myTable");
    var rowLength = table.rows.length;
  var endOfCol = table.rows[0].cells.length;
    for(var i = 0; i < rowLength; i++)
        {
             var firstRow = document.getElementById("myTable").rows[i];
         var cell = firstRow.insertCell(endOfCol-1);
       cell.contentEditable = "true"
       if (i == 0)
         {
        cell.innerHTML = "-";
        cell.style.textAlign = "center";
            cell.style.backgroundColor = "black";
        cell.style.color = "white";
        cell.style.fontWeight = "600";
       }
       else
       {
        cell.innerHTML = "-";
       }

        }
}

function saveTable()
{
     var table = document.getElementById("myTable");
     var noOfRows = table.rows[0].cells.length; // amount of cols
     var noOfCols = table.rows.length;
     var data = '';
     for(var i = 1; i < table.rows.length; i++)
     {
         for(var j = 0; j < table.rows[0].cells.length-1; j++)
        {
                data += table.rows[i].cells[j].innerHTML + ",";
          }
     }
   setCookie("data", data, noOfCols, noOfRows, 60);
   alert("Cookie Saved");
}

function setCookie(cname, cvalue, noOfRows, noOfCols, exdays) {

    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires = "+ d.toUTCString();
    document.cookie = cname + " = " + cvalue  +";" + expires + ";path=/";
}

function LoadTable()
{
    var table = document.getElementById("myTable");

    var rowLength = table.rows.length;
  var endOfCol = table.rows[0].cells.length;
  var data = getCookie("data");  
  var array = data.split(',');
  var count = 0;
  for(var i =1;i<rowLength;i++)
  {
    for(var j = 0; j < endOfCol-1; j++)
    {       
      table.rows[i].cells[j].innerHTML = array[count];
      count++;
    }
  }
}

function getCookie(cname)
{
    var name = cname + " = ";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) 
  {
        var c = ca[i];
        while (c.charAt(0) == ' ') 
        {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) 
        {
            return c.substring(name.length, c.length);
        }
  }
    return "";
}

PS. Мне нужно сделать это там, где последний столбец складывает числа из других столбцов в этой строке, поэтому мы хотим пропустить этот столбец при добавлении данных, а также не сохранять все, что находится в этой ячейке.

Вы уверены, что хотите использовать cookie, а не localStorage? файлы cookie фактически отправляются вместе с любым веб-запросом, что увеличивает размер запроса. Также некоторые веб-серверы по умолчанию могут иметь проблемы с большими файлами cookie. Я знаю, что у IIS / .NET может быть эта проблема. Если вы храните сотни символов, вам может быть лучше с localStorage

— 16.03.2018 00:16

Да, я пытаюсь ответить на несколько вопросов, и этот не позволит мне использовать что-нибудь еще.

— 16.03.2018 00:17

понял. вы знаете, как использовать инструменты разработчика вашего веб-браузера? например, установка точек останова в коде, пошаговое выполнение и проверка значений?

— 16.03.2018 00:19

Я делаю. Но на самом деле я знаю, как загрузить таблицу, с которой у меня проблемы. Я не знаю, как это сделать.

— 16.03.2018 00:22

хорошей отправной точкой было бы установить точку останова в вашем LoadTable, возможно, сразу после разделения, и посмотреть, правильно ли выглядит массив. Если это так, продолжайте движение вперед в цикл. если он выглядит неправильно, посмотрите дальше назад, чтобы увидеть, проблема ли это при сохранении файла cookie или проблема при чтении файла cookie.

— 16.03.2018 00:29

javascript html css

16.03.2018 00:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

132

Другие вопросы по теме

Как использовать jquery и javascript в одном документе

Document.getElementById (). value как переменная не будет работать

<img> не 100% ширина в сетке Bootstrap?

Можно ли вручную установить формат даты в HTML5

CSS HTML Перезаписать ширину div, чтобы сделать видео YouTube на всю ширину

Заменить идентификатор div и текст внутри другого div на jquery

Как сделать внутренний радиус границы в css?

Можно ли щелкнуть IFrame?

Как разместить фоновое изображение по бокам контейнера в бутстрапе?

BBcode -> проблема с парсингом HTML

Загрузить таблицу из сохраненного файла cookie

Другие вопросы по теме

Похожие вопросы