show display:刷新后没有div

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在浏览器关闭时被删除(两者的使用是等价的).所有主流浏览器都支持webStorage,IE> = 8

简单的Javascript

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

并检查状态onLoad:

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

演示

PS从localStorage使用中删除项目

localStorage.removeItem('show');

参考

webStorage

Answer 2

使用localstorage来保存状态

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

   function hideTable() {
       document.getElementById('tableDiv').style.display = "none";
       localStorage.removeItem('showTable');  //remove key   
   }

   if (localStorage.getItem('showTable')) {  //see if flag is set (returns undefined if not set)
       showTable();   //if set show table
   }
</script>