Question

我有几个div，用户可以使用jquery切换方法最小化或扩展。但是，当页面刷新时，Div将返回其默认状态。他们是否有办法让浏览器记住div的最后状态？

例如，如果我展开ID为“my_div”的div，然后点击页面上的其他内容，然后返回原始页面，我希望“my_div”保持展开状态。

我认为有可能为此使用会话变量，也许当用户点击展开/最小化按钮时，可以发送一个AJAX请求并切换一个会话变量... IDK ..任何想法？

Answer 1

不需要ajax请求，只需将信息存储在cookie或localstorage中。这是一个应该帮助你的图书馆：http://www.jstorage.info/

一些示例代码（未经测试）：

// stores the toggled position
$('#my_div').click(function() {
    $('#my_div').toggle();
    $.jStorage.set('my_div', $('#my_div:visible').length);
});

// on page load restores all elements to old position
$(function() {
    var elems = $.jStorage.index();
    for (var i = 0, l = elems.length; i < l; i++) {
        $.jStorage.get(i) ? $('#' + i).show() : hide();
    }
});

Answer 2

如果您不需要支持旧浏览器，则可以使用html5 web storage。

你可以做这样的事情（例子来自w3schools）：

以下示例计算用户访问过的次数页面，在当前会话中：

<script type="text/javascript">
if (sessionStorage.pagecount) {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else {
  sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

Answer 3

其他人已经提供了与cookie和本地存储API相关的有效答案，但根据您对该问题的评论，以下是如何将click事件处理程序附加到链接：

$("#someLinkId").click(function() {
    $.post("somewhere.php", function() {
        //Done!
    });
});

只要单击附加到的元素，事件处理函数就会运行。在事件处理程序中，您可以运行您喜欢的任何代码。在此示例中，将向somewhere.php触发POST请求。

Answer 4

我有类似的东西，我根据用户登录使用了cookies 如果你只想要主div不使用

      $('#'+div_id).next().css('display','none');

使用

      $('#'+div_id).css('display','none');

* 以下是代码*

 //this is the div 
 <div id = "<?php echo $user; ?>1" onclick="setCookie(this.id)" ><div>My Content this will hide/show</div></div>


function setCookie(div_id)
   {
var value = ''; 
var x = document.getElementById(div_id); 
var x = $('#'+div_id).next().css('display'); 
if(x == 'none')
{
    value = 'block'; 
}
else
{
    value = 'none';
}
console.log(div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/")
//alert(x); 
document.cookie = div_id+"="+value+"; expires=15/02/2012 00:00:00;path=/";

   }


    function getCookie(div_id)
    {
console.log( div_id ); 
  var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
 {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
if (x==div_id)
{
   return unescape(y);
   }
  }
}

 function set_status()
 {

var div_id = ''; 

for(var i = 1; i <= 9 ; i++)
{
    div_id = '<?php echo $user; ?>'+i; 


    if(getCookie(div_id) == 'none')
    {

        $('#'+div_id).next().css('display','none'); 
    }
    else if(getCookie(div_id) == 'block') 
    {
        $('#'+div_id).next().slideDown(); 
    }

}

}

$(document).ready(function(){
    get_status();
 });

Answer 5

查看JavaScript Cookie方法，您可以保存div的当前状态，并在用户回到本网站时恢复它。有一个很好的jQuery插件来处理Cookies（http://plugins.jquery.com/project/Cookie）

希望有所帮助

Answer 6

结束使用此功能。伟大的教程。

http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

单击链接时，使用Jquery更新PHP会话变量

6 个答案: