如何在F5之后保存页面状态

时间:2012-10-15 22:21:30

标签: php javascript

如何在按F5后保存页面状态。(使用php或javascript)

我有这个页面,如果我按下按钮1,div 1消失,如果再次按div 1,它会重新出现。 按钮2具有相同的功能。 有没有办法,如果我按下按钮1(或按钮2)消失div,然后如果我按F5继续div1(或div2)隐藏,??

<input type="submit" id="button1" name="button1" value="ID1"><br/>

    <div id="div1" name="div1"/> 
    <b>Hello1</b><br>
    <img src="pic1.png" height="100px" width="100px" /> 
    </div>
<input type="submit" id="button2" name="button2" value="ID2"><br/>

    <div id="div2" name="div2"/> 
    <b>Hello2</b><br>
    <img src="pic2.png" height="100px" width="100px" /> 
    </div>
<script>
 $(document).ready(function(){
        $("#button1").toggle(function(){
            $("#div1").hide();
        }, 
        function(){
            $("#div1").show();
        });
    });
    //
    $(document).ready(function(){
        $("#button2").toggle(function(){
            $("#div2").hide();
        }, 
        function(){
            $("#div2").show();
        });
    });
</script>

先谢谢

3 个答案:

答案 0 :(得分:4)

好的Cookies可以解决保存最后状态等问题。 如果您不确定html5是否适用于所有浏览器。

答案 1 :(得分:2)

一种方法是使用HTML5历史记录。

var state = { div1: true, div2: false };
history.pushState(state, 'Page', 'mypage/10');

答案 2 :(得分:1)

本地存储

当您想要保存大量数据时,您还有另一个机会 - 使用本地存储(自HTML5起)。你可以直接使用JavaScript或使用一个可用的jQuery插件来完成它。

例如,使用totalStorage:

 var scores = new Array();
scores.push({'name':'A', points:10});
scores.push({'name':'B', points:20});
scores.push({'name':'C', points:0});
$.totalStorage('scores', scores);