Javascript 显示显示：刷新后无 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28481221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show display:none div after refresh
提问by nahid
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.
不知道题名怎么写正确！我有一个通过单击按钮显示的 div。问题是，如果用户转到下一页（通过单击另一个按钮）然后返回旧页面，则不会显示 div，因为页面已刷新，因此用户需要再次单击该按钮才能看到 div。
Is there any way to keep div displayed after button clicked for first time?
有没有办法在第一次单击按钮后保持 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>
回答by empiric
You can use the html5 webStorage for this:
您可以为此使用 html5 webStorage：
localStoragedoes not expire, whereas sessionStoragegets deleted when the browser is closed (usage of both is equivalent). The webStorage is support by all major browsers and IE >= 8
localStorage不会过期，而sessionStorage在浏览器关闭时会被删除（两者的用法是等效的）。webStorage 被所有主流浏览器和 IE >= 8 支持
Plain Javascript
纯Javascript
function showTable() {
document.getElementById('tableDiv').style.display = "block";
localStorage.setItem('show', 'true'); //store state in localStorage
}
And check the state onLoad:
并检查状态 onLoad：
window.onload = function() {
var show = localStorage.getItem('show');
if(show === 'true'){
document.getElementById('tableDiv').style.display = "block";
}
}
jQuery
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();
}
});
P.S. To remove an item from the localStorage use
PS从localStorage中删除一个项目使用
localStorage.removeItem('show');
Reference
参考
回答by epascarello
Use localstorage to save the state
使用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>
回答by Dustin Poissant
I think your best option is to use the location.hashas a JavaScript Router. Basically modify the hash, watch for hash changes and if the hash is equal to a specific value do something. Then when the used leaves and hits "back", they will come back to the page with the previous hash, in which case you can detect which version of the page they were on and recreate it.
我认为您最好的选择是将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>
There are many other options such as cookies or localstorage.
还有许多其他选项，例如 cookie 或 localstorage。
Check out this plugin:
看看这个插件：
https://github.com/addcms/addHashRouter
https://github.com/addcms/addHashRouter
Using this solution you might do something like this:
使用此解决方案，您可能会执行以下操作：
HTML
HTML
<div id="tableDiv" style="display:none;">
<table>
<td>something</td>
</table>
</div>
<a href='#show'>Show Table</a>
JavaScript
JavaScript
$add.UI.hashRouter.add("show", function(){
document.getElementById('tableDiv').style.display = "block";
});
And then if they hit the "back button" after navigating away from the page it will still appear, and if they hit the back button after showing the table it will not "rehide" it, unless you added this:
然后如果他们在离开页面后点击“后退按钮”，它仍然会出现，如果他们在显示表格后点击后退按钮，它不会“重新隐藏”它，除非你添加了这个：
HTML
HTML
<a href='#hide'>Hide Table</a>
JavaScript
JavaScript
$add.UI.hashRouter.add("hide", function(){
document.getElementById('tableDiv').style.display = "none";
});
And then you can use show/hide buttons with browser navigation.
然后您可以在浏览器导航中使用显示/隐藏按钮。
回答by Ismael Miguel
Using @DustinPoissant's answer, I've made something a little bit easier.
使用@DustinPoissant 的回答，我让事情变得简单了一点。
You can use the selector :targetto style the element, and save you some code.
您可以使用选择器:target来设置元素的样式，并为您节省一些代码。
Like this:
像这样：
<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>
The :targetselector will match when the 'hash' on your address matches the id of that element.
在:target当上你的地址的“哈希”该元素的ID匹配选择匹配。
回答by Timotheus Triebl
you can achieve it with a cookie. there's a good lightweight jquery cookie pluginfor this.
你可以用cookie来实现它。有一个很好的轻量级jquery cookie 插件。
so set a cookie:
所以设置一个cookie：
$.cookie("var", "10");
to get the cookie:
获取cookie：
$.cookie("var");
to delete the cookie:
删除cookie：
$.cookie("var", null);
and now you can do something like:
现在您可以执行以下操作：
function showTable() {
document.getElementById('tableDiv').style.display = "block";
$.cookie("var", "1");
}
function leaveButtonOpen(){
if($.cookie("var") == 1){
document.getElementById('tableDiv').style.display = "block";
}
}
