Question 36611 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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 class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

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

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

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

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

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

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

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

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

Fiddle link for the code

Tags:

2

Answers


  1. 0 
    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);
      
});
});
    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search