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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th  colspan="7">abcd</th>
      <th  colspan="7">abcd</th>
      <th  colspan="7">abcd</th>
      <th  colspan="7">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>
    </tr>
    <tr>
      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>
    </tr>
    <tr>
      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>
    </tr>
    <tr>
      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>

      <td >col1</td>
      <td >col2</td>
      <td >col3</td>
      <td >col4</td>
      <td >col5</td>
      <td >col6</td>
      <td >col7</td>
    </tr>
  </tbody>
</table>
<br>

<button  data-target-index="1">1</button>
<button  data-target-index="2">2</button>
<button  data-target-index="3">3</button>
<button  data-target-index="4">4</button>
<button  data-target-index="5">5</button>
<button  data-target-index="6">6</button>
<button  data-target-index="7">7</button>

Fiddle link for the code

CodePudding user response：

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

CodePudding user response：

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)