Show hide javascript cookie

Question

function showhide() {
if( document.getElementById("hidethis").style.display=='none' ){
  document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
}else{
  document.getElementById("hidethis").style.display = 'none';
}
}

I have this working javascript function to hide a row in a table - like this

<tr id="hidethis" style="display:table-row;">

It works fine but i want to use cookies to remember which option user chose. I cant figure out how to properly set cookies, some advice would be much appreciated.

If you want to remember it permanently go with `localStorage` else you can go with `sessionStorage`. These are `html5` browser functionalities. — Guruprasad J Rao, Sep 29 '15 at 10:02

score 0 · Answer 1 · edited May 23 '17 at 12:29

Try this:

You need to store the value in cookies and read those values on DOMContentLoaded event ad set your style accordingly

Reference used to create and read cookies values

var createCookie = function(name, value, days) {
  var expires;
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toGMTString();
  } else {
    expires = "";
  }
  document.cookie = name + "=" + value + expires + "; path=/";
};

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return "";
}

document.addEventListener('DOMContentLoaded', function() {
  var cookieVal = getCookie('display');
  if (cookieVal) {
    document.getElementById("hidethis").style.display = cookieVal;
  }
});

function showhide() {
  if (document.getElementById("hidethis").style.display == 'none') {
    document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
    createCookie('display', 'table-row', 365);
  } else {
    document.getElementById("hidethis").style.display = 'none';
    createCookie('display', 'none', 365);
  }
}

<table>
  <tr id="hidethis" style="display:table-row;">
</table>

Thanks! It seems to be working. I understand this correctly, will this store a cookie for a year? — Gorzalt, Sep 29 '15 at 10:12

Show hide javascript cookie

1 Answers1