显示：刷新后没有div [英] show display:none div after refresh

问题描述

不知道如何正确地提出问题标题！
我有一个按钮点击显示的div。问题是，如果用户转到下一页（通过单击另一个按钮），然后返回到旧页面，则div不会显示，因为页面已刷新，因此用户需要再次单击该按钮才能看到div。

有没有办法让第一次点击按钮后显示div？

 < div id =tableDivstyle =display：none; > 
< table> 
< td>东西< / td> 
< / table> 
< / div> 
 
< input type =buttonvalue =ShowonClick =showTable（）/> 
 
< script type =text / javascript> 
 function showTable（）{
 document.getElementById（'tableDiv'）。style.display =block; 
} 
< / script> 
  

解决方案

您可以使用html5 webStorage进行此操作：

localStorage 不会过期，而 sessionStorage 浏览器已关闭（两者的用法相同）。 webStorage支持所有主流浏览器，并且IE> = 8

纯Javascript> b
$ b

  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 
 
 $ b $（document）.ready（function（）{
 var show = localStorage.getItem（'show'）; 
 if（show ==='true'）{
 $（'＃tableDiv'）。show（）; 
} 
}）; 
  

演示

PS从localStorage中删除一个项目使用

  localStorage.removeItem（'show'）; 
  

参考

webStorage

Don't know how to put the question title correctly! I have a div that is displayed by button click. The problem is that if user goes to next page(by clicking another button) and then come back to the old page the div is not shown because page is refreshed, so user needs to click the button again to see the div.

Is there any way to keep div displayed after button clicked for first time?

<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>

解决方案

You can use the html5 webStorage for this:

localStorage does not expire, whereas sessionStorage gets deleted when the browser is closed (usage of both is equivalent). The webStorage is support by all major browsers and IE >= 8

Plain Javascript

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

And check the state 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();
    }
});

Demo

P.S. To remove an item from the localStorage use

localStorage.removeItem('show');

Reference

webStorage

这篇关于显示：刷新后没有div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！