javascript - 显示显示 :none div after refresh

Question

不知道题名怎么写对!我有一个通过单击按钮显示的 div。问题是，如果用户转到下一页(通过单击另一个按钮)然后返回到旧页面，则不会显示 div，因为页面已刷新，因此用户需要再次单击按钮才能看到 div。

有什么办法可以在第一次点击按钮后保持div显示？

<div id="tableDiv" style="display:none;" >
<table>
   <td>something</td>
</table>
</div>

<input type="button" value="Show" onClick="showTable()"/>

<script type="text/javascript">         
   function showTable() {
       document.getElementById('tableDiv').style.display = "block";
   }                
</script>

Answer 1

您可以为此使用 html5 webStorage:

localStorage 不会过期，而 sessionStorage 会在浏览器关闭时被删除(两者的用法是等效的)。所有主流浏览器和 IE >= 8 均支持 webStorage

纯 Javascript

function showTable() {
   document.getElementById('tableDiv').style.display = "block";
   localStorage.setItem('show', 'true'); //store state in localStorage
}

并检查加载状态:

window.onload = function() {
    var show = localStorage.getItem('show');
    if(show === 'true'){
         document.getElementById('tableDiv').style.display = "block";
    }
}

jQuery

function showTable() {
    $('#tableDiv').show();
    localStorage.setItem('show', 'true'); //store state in localStorage
}

$(document).ready(function(){
    var show = localStorage.getItem('show');
    if(show === 'true'){
        $('#tableDiv').show();
    }
});

Demo

附言从 localStorage 中删除一个元素使用

localStorage.removeItem('show');

引用

webStorage