How to save the state of toggle button after the page is reloaded using JavaScript/jQuery

Question

I'm new to js can you guys please help me with this problem. How can I use local storage to save the state of the buttons even after the page is refreshed/reloaded below is the code I'm using for toggle buttons to hide and show the columns but when the page is refreshed the hidden columns are visible again. please help

jQuery($ => {
  let $headings = $('.heading');

  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length;
    $headings.prop('colspan', colspan);
  });
});

table,
th,
td {
  border: 1px solid black;
}



  
    
      abcd
      abcd
      abcd
      abcd
    
  
  
    
      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7
    
    
      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7
    
    
      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7
    
    
      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

      col1
      col2
      col3
      col4
      col5
      col6
      col7

Fiddle link for the code

useriNHz · Answer

jQuery($ => {
  let $headings = $('.heading');
  var prevData = [];
    if(localStorage.getItem('prevData')){
    var prevData = JSON.parse(localStorage.getItem('prevData'));
    if(prevData && prevData.length>0){
    prevData.forEach((e)=>{
        if(prevData.includes(e)){
      let $el = $('.col' + e).toggle();
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length;
    $headings.prop('colspan', colspan);
      }
        
    })
    }
  }
  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    if(!(prevData && prevData.length>=0)){
        prevData=[];
    }
    var prevIndex = prevData.indexOf(e.target.dataset.targetIndex);
    if(prevIndex>=0){
    prevData.splice(prevIndex, 1);
    }else{
    prevData.push(e.target.dataset.targetIndex);
    }
    
    localStorage.setItem('prevData', JSON.stringify(prevData));
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length;
    $headings.prop('colspan', colspan);
      
});
});

Julius Babies · Answer

If it's not important to use local storage you can use Cookies for that. I wrote some functions for that:

export function getDocumentCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return undefined;
}
export function setDocumentCookie(name, value, days) {
    if (document.cookie.toString().match(/ + name + =/g)) {
        document.cookie.replace(/ + name + =*; path=\//g, "");
    }
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

setDocumentCookie("myToggle", state)

How to save the state of toggle button after the page is reloaded using JavaScript/jQuery

2 Answers