Question

我需要添加Cookie，以便当一个div打开（显示）并且用户点击刷新时，它会重新启动最后一个状态。

我知道它应该很简单，但我在js剧本中总是一个菜鸟，并且比我的头脑还要多。任何帮助都不仅仅是值得赞赏的。我在这个论坛上看过不同的例子，但是他们被征集并且不清楚。寻找一个简单的代码解决方案。谢谢！

<script type="text/JavaScript">
$(document).ready(function(){       
    $('a.row_view').click(function() {
        $('.contentPadd.r_view').css('display', 'block');
        $('.contentPadd.l_view').css('display', 'none')
        $('.contentPadd.t_view').css('display', 'none');
    });
    $('a.list_view').click(function() {
        $('.contentPadd.r_view').css('display', 'none') //horizontal
        $('.contentPadd.l_view').css('display', 'block') //list
        $('.contentPadd.t_view').css('display', 'none') //thumbnails
    });
    $('a.table_view').click(function() {
        $('.contentPadd.r_view').css('display', 'none')
        $('.contentPadd.l_view').css('display', 'none')
        $('.contentPadd.t_view').css('display', 'block')
    });
});                                    
</script>

<a class="row_view">1</a>&nbsp;&nbsp;<a class="list_view">2</a>&nbsp;&nbsp;<a class="table_view">3</a>

<div class="contentPadd r_view">NUMBER 1</div>
<div class="contentPadd t_view">NUMBER 2</div>
<div class="contentPadd l_view">NUMBER 3</div>

Answer 1

我写了一个cookie处理程序，你可以在这里找到：http://forrst.com/posts/JavaScript_cookie_handler-JE9

要使用它，请创建Ovenmitts对象的新实例。然后，将两个参数传递给bakeCookie方法：name和value。在click功能中，执行以下操作：

$('a.row_view').click(function() {
  var cookieObj = new Ovenmitts();
  cookieObj.bakeCookie('opened', 'a.row_view');
  $('.contentPadd.r_view').css('display', 'block');
  $('.contentPadd.l_view').css('display', 'none')
  $('.contentPadd.t_view').css('display', 'none');
});

然后，在页面加载时，调用admireCookie方法：

$(document).ready(function() {
  var cookieObj = new Ovenmitts();
  var cookie = cookieObj.admireCookie('opened');
  if (cookie === 'a.row_view') {
    $('.contentPadd.r_view').css('display', 'block');
    $('.contentPadd.l_view').css('display', 'none')
    $('.contentPadd.t_view').css('display', 'none');
  }
});

如果您在实施此问题时遇到任何问题，请与我们联系。

此外，您可以使用jQuery .css('display', 'block')和.css('display', 'none')函数代替.show()和.hide()。

您可以通过调用bakeCookie方法并传入相同的名称（例如“已打开”）来覆盖Cookie。这样，您可以传入一个值来记住哪个抽屉是打开的。

Answer 2

感谢尼克。

创建或添加到.js文件中：


//用于列出布局的cookie处理程序//实例化一个新对象，   创建一个变量并调用新的运算符//例如var myCookie = new   烤箱手套（）; //然后你可以通过访问Ovenmitts的方法   myCookie.bakeCookie（）等var var Ovenmitts = function（）{var ctx =   这个; //创建一个cookie //接受3个参数：name，value，   days // cookie获取名称/值的键/值对，expires /   天//天是可选的，默认为会话结束ctx.bakeCookie =   功能（名称，价值，天数）{       if（days）{         var date = new Date（）;         date.setTime（date.getTime（）+（days * 24 * 60 * 60 * 1000））;         var expires =“; expires =”+ date.toGMTString（）;       } else {var expires =“”; }       return document.cookie = name +“=”+ value + expires +“; path = /”; }; //读取cookie //接受name参数（   cookie中的第一个值）ctx.admireCookie = function（name）{       var nameEQ = name +'=';       var ca = document.cookie.split（';'）;       for（var i = 0; i＆lt; ca.length; i + = 1）{         var c = ca [i];         while（c.charAt（0）===''）{c = c.substring（1，c.length）; }         if（c.indexOf（nameEQ）=== 0）{return c.substring（nameEQ.length，c.length）; }       }       return null; }; }; // cookie处理程序结束。

$（document）.ready（function（）{//产品列表布局div开关
    $（'a.row_view'）。click（function（）{var cookieObj = new   烤箱手套（）;                 cookieObj.bakeCookie（'open'，'a.row_view'）;         $（ 'contentPadd.r_view。'）显示（）。             $（ 'contentPadd.l_view。'）隐藏（）。             $（ 'contentPadd.t_view。'）隐藏（）。 }）;

$（'a.list_view'）。click（function（）{var cookieObj = new   烤箱手套（）;                 cookieObj.bakeCookie（'open'，'a.list_view'）; $（ 'contentPadd.r_view。'）隐藏（）; //水平         $（ 'contentPadd.l_view。'）显示（）。 //列表         $（ 'contentPadd.t_view。'）隐藏（）。 //缩略图}）;
    $（'a.table_view'）。click（function（）{var cookieObj = new   烤箱手套（）;                 cookieObj.bakeCookie（'open'，'a.table_view'）; $（ 'contentPadd.r_view。'）隐藏（）。 $（ 'contentPadd.l_view。'）隐藏（）。         $（ 'contentPadd.t_view。'）显示（）。 }）; var cookieObj = new   烤箱手套（）; var cookie = cookieObj.admireCookie（'open'）;如果   （cookie ==='a.row_view'）{         $（ 'contentPadd.r_view。'）显示（）。             $（ 'contentPadd.l_view。'）隐藏（）。             $（ 'contentPadd.t_view。'）隐藏（）。 } var cookieObj = new Ovenmitts（）; var cookie = cookieObj.admireCookie（'open'）;如果   （cookie ==='a.list_view'）{         $（ 'contentPadd.r_view。'）隐藏（）; //水平         $（ 'contentPadd.l_view。'）显示（）。 //列表         $（ 'contentPadd.t_view。'）隐藏（）。 //缩略图}       var cookieObj = new Ovenmitts（）; var cookie = cookieObj.admireCookie（'open'）; if（cookie ==='a.table_view'）{         $（ 'contentPadd.r_view。'）隐藏（）。 $（ 'contentPadd.l_view。'）隐藏（）。         $（ 'contentPadd.t_view。'）显示（）。 } // END产品列表布局   div开关
将此添加到我的test.html页面。还要添加js文件：

    <script language="javascript" src="YOURJSFILE.js"></script>
   <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.js"></script>

<a class="row_view">TEST 1</a>&nbsp;&nbsp;
<a class="list_view">TEST 2</a>&nbsp;&nbsp;
<a class="table_view">TEST 3</a>

将此添加到我的test.html页面

<div class="contentPadd r_view">TEST 1</div>
<div class="contentPadd t_view">TEST 2</div>
<div class="contentPadd l_view">TEST 3</div>

这就是它。 - 添加到PHP -ADD图像 - 扩展 - 等等。

将Cookie添加到简单的功能中

2 个答案: