Question

我对javascript很新，似乎在使用Cookie时出现问题。我发现很多帖子都有类似的问题但是当我开始阅读答案时，我越来越困惑。我甚至试图跟随youtube tuorials，但似乎找不到能够正确解释它的人。我在过去的3个小时里一直坚持这一点，现在我不能放弃。

我有一个div，可以切换为可见或不可见。我正在使用javascript函数。

function exp_col(x, y){
 x = document.getElementById(x);
 y = document.getElementById(y);

if (x.style.display == "block") {
    x.style.display = "none";
    y.src = "images/layout/plus.png";
} else {
    x.style.display = "block";
    y.src = "images/layout/minus.png";
}}

当用户切换div时，我希望能够记住它并保持div的状态相同，即使它们进入不同的页面。我被告知我需要饼干，但我似乎无法制作一个有效的。我不确定我是否理解他们。我知道他们成对存储信息，如名称 - 但我不明白如何使用它来做我想要的。我在哪里设置cookie？我该如何设置？我如何使用它来做我想要的？我现在真的很困惑，并希望得到一些帮助。

切换@ http://hello-world.cu.cc

的实例

由于

Answer 1

这里有你可能需要的例子

<html>
<head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
   <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function(){
            var toggle=$('.toggle');
            var inner=toggle.find('.inner');
            if($.cookie('divState')=='visible')
                inner.show();
            else
                inner.hide();
            toggle.find('a').click(function(){
                if(inner.is(':visible'))
                    $.cookie('divState', 'hidden');
                else
                    $.cookie('divState', 'visible');
                inner.toggle();
            });
        });
    </script>
    <style type="text/css">
        div
        {
            padding: 2px;
            border: 1px solid #ccc; width: 300px
        }
    </style>
</head>
<body>
    <div class="toggle">
        <a>Click me</a>
        <div class="inner">
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />
            Some text <br />

        </div>
    </div>
</body>
</html>

点击“点击我”并多次上传页面 - 你会记住div状态被记住。它存储在cookie中。

如果不介意我使用jquery。我试图展示的只是工作流程。如果您不能使用jquery，将示例转换为本机javascript非常容易。

现场演示 - http://jsfiddle.net/CQFJ4/

我希望这有用。

Answer 2

设置cookie非常简单：

document.cookie="mydiv=block";

您可以到这里查看有关阅读和删除Cookie的示例：http://www.quirksmode.org/js/cookies.html

css javascript cookie记住div切换状态

2 个答案: