cookieまたはlocalStorageを使用してdivのオープン/クローズ状態を覚えておく方法は？

Question

誰かがクリックするまでdivを閉じたままにして、開いているか閉じているかを覚えています。ここで私がこれまで持っているものです。

<input id="chk1" type="button" value="Click here"/> 

<div id="box1" style="display:none"> 
    <!-- HTML STUFF HERE --> 
</div> 

<script> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
     $('#chk1').click(function() { 
     $('#box1').slideToggle('200'); 
     localStorage.setItem('show', 'true'); 
     }); 
    }); 
</script> 

それはdivのオープン/クローズ状態を覚えていないことを除いそれは動作します。

可能であれば、これ以上スクリプトを追加せずにやりたいと思います。

Answer 1

問題は、実際にはどこでもlocalStorageをチェックしていないことです。この設定を切り替えようとしているので、showを'true'に設定しないでください。

<script> 
    jQuery.noConflict(); 
    jQuery(document).ready(function($) { 
    $box1 = $('#box1'); 
    const show = JSON.parse(localStorage.getItem('show')); 

    if (show) { 
     $box1.show(); 
    } else { 
     // initialize value in case it hasn't been set already 
     localStorage.setItem('show', false); 
    } 

    $('#chk1').click(function() { 
     $box1.slideToggle('200'); 
     // toggle the boolean by negating its value 
     const show = JSON.parse(localStorage.getItem('show')); 
     localStorage.setItem('show', !show); 
    }); 
    }); 
</script> 

これらは文字列としてあなたに与えられているので、値はローカルストレージから取り出すことに注意してくださいは、JSONとしてパースする必要があります。

そして、ネストされたブロックを常に正しくインデントすることで、簡単に作業できます。読みやすくなりました。