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>

Answer 3

我认为您最好的选择是将location.hash用作JavaScript路由器。 基本上修改散列，监视散列更改，如果散列等于特定值做某事。 然后当使用的离开并点击“返回”时，它们将返回到具有前一个散列的页面，在这种情况下，您可以检测它们所在页面的哪个版本并重新创建它。

<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(){
    location.hash = "#show"; // sets hash to #show, which will fire onhaschange event which its handler is hashRouter()
  }
  function hashRouter(){
    if(window.hash == "#show"){ // shows table if hash is #show
      document.getElementById('tableDiv').style.display = "block";
    }
  }
  window.onhashchange = hashRouter; // Calls when hash is changed.
  window.onload = hashRouter; // Calls when page loads;
</script>

还有许多其他选项，例如cookie或localstorage。

看看这个插件：

https://github.com/addcms/addHashRouter

使用此解决方案，您可能会执行以下操作：

HTML

<div id="tableDiv" style="display:none;">
  <table>
    <td>something</td>
  </table>
</div>
<a href='#show'>Show Table</a>

JavaScript的

$add.UI.hashRouter.add("show", function(){
    document.getElementById('tableDiv').style.display = "block";
});

然后如果他们在离开页面后点击“后退按钮”它仍会出现，如果他们在显示表后点击后退按钮，它将不会“重新隐藏”它，除非你添加了这个：

HTML

<a href='#hide'>Hide Table</a>

JavaScript的

$add.UI.hashRouter.add("hide", function(){
    document.getElementById('tableDiv').style.display = "none";
});

然后你可以使用浏览器导航的显示/隐藏按钮。

Answer 4

使用@ DustinPoissant的答案，我做了一些更容易的事情。

您可以使用selector :target来为元素设置样式，并为您节省一些代码。

像这样：

<style>
    #tableDiv {display:none;}
    #tableDiv:target {display:block!important;}
</style>

<div id="tableDiv">
    <table>
        <tr>
            <td>something</td>
        </tr>
    </table>
</div>

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

<script type="text/javascript">
   function showTable() {
       location.hash='tableDiv';
   }
   function hideTable() {
       location.hash='';
   }
</script>

当地址上的'hash'与该元素的id匹配时， :target选择器将匹配。

Answer 5

你可以用cookie实现它。 这是一个很好的轻量级jquery cookie插件 。

所以设置一个cookie：

$.cookie("var", "10");

获取cookie：

$.cookie("var");

删除cookie：

$.cookie("var", null);

现在你可以这样做：

function showTable() {
    document.getElementById('tableDiv').style.display = "block";
    $.cookie("var", "1");
}

function leaveButtonOpen(){
    if($.cookie("var") == 1){
        document.getElementById('tableDiv').style.display = "block";
    }
}