how can I save the state of toggle buttons even after the page is refreshed using jQuery. I googled it and found that we can do it using local Storage but how to apply local storage in jQuery all I could find was examples on JavaScript. please help. Below is the code to toggle(hide/show) table columns.
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>