Настройки магазина в Javascript Cookie

Question

Я новичок в Javascript, у меня есть Javascript для таблицы html, которую пользователь может редактировать, чтобы отображать или скрывать столбцы из таблицы html. Скрипт отлично работает. Но проблема в том, что когда страница обновляется, она отображает все столбцы из таблицы html. Он не запоминает последние настройки.

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

Вот Javascript:

См рабочий пример на jsfiddle https://jsfiddle.net/b9chris/HvA4s/

<script> 
$(document).ready(function(){ 

$('#edit').click(function() { 
    var headers = $('#table th').map(function() { 
     var th = $(this); 
     return { 
      text: th.text(), 
      shown: th.css('display') != 'none' 
     }; 
    }); 

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>']; 
    $.each(headers, function() { 
     h.push('<th><input type=checkbox', 
       (this.shown ? ' checked ' : ' '), 
       '/> ', 
       this.text, 
       '</th>'); 
    }); 
    h.push('</tr></thead></table></div>'); 
    $('body').append(h.join('')); 

    $('#done').click(function() { 
     var showHeaders = $('#tableEditor input').map(function() { return this.checked; }); 
     $.each(showHeaders, function(i, show) { 
      var cssIndex = i + 1; 
      var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')'); 
      if (show) 
       tags.show(); 
      else 
       tags.hide(); 
     }); 

     $('#tableEditor').remove(); 
     return false; 
    }); 

    return false; 
}); 
}); 
</script> 

Answer 1

Чтобы написать печенье в JavaScript написать:

document.cookie = "username=John Doe"; 

Где вы можете заменить имя пользователя с любым именем может думать, все, что стоит за = - это, конечно, ваша ценность.

читать ваши куки вы можете использовать эту функцию из W3Scools:

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

просто позвоните getCookie("username") если вы хотите, чтобы получить имя пользователя, например

Answer 2

Вы также можете сохранить ваши настройки в браузере локального хранения : см. official documentation.

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