使用 JavaScript/jQuery 重新加載頁面后如何保存切換按鈕的 state

Question

我是js新手，你們能幫我解決這個問題嗎？ 我如何使用本地存儲來保存按鈕的 state 即使在頁面刷新/重新加載之后下面是我用於切換按鈕以隱藏和顯示列的代碼但是當頁面刷新時隱藏的列再次可見. 請幫忙

 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>

代碼的小提琴鏈接

Answer 1

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

Answer 2

如果使用本地存儲並不重要，您可以使用 Cookies 。 我為此寫了一些函數：

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)