Store settings in Javascript Cookie

Question

I am new to Javascript, I have a Javascript for html table that user can edit to show or hide columns from html table. Script works fine. But the problem is when page is refreshed it shows all the columns from the html table. It does not remember the last settings.

I want to be able to store the settings of last action from the script, so when the page is refreshed or loaded it remembers the last time settings. I don't know how to achieve this, I would appreciate if you can show me how to do it?

Here is the Javascript:

See working example at 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

To write a cookie in javascript write:

document.cookie = "username=John Doe";

Where you can replace username with any name you can think of, everything behind the = is of course your value.

to read your cookie you can use this function from 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 "";
}

just call getCookie("username") if you want to get the username for example

Answer 2

You could also store your settings to the browser local storage: see the official documentation .

Basically, when your script is loading, just look into the session storage to retrieve the desired settings; and whenever the user edits the table, put their changes inside the storage. It's pretty straightforward, and really not as heavy as cookies to manipulate.