设置 cookie 以更改引导菜单答案

【问题标题】：Set cookie to change Bootstrap Menu设置 cookie 以更改引导菜单
【发布时间】：2014-04-22 21:27:26
【问题描述】：

我有一个 HTML 网站，使用 bootstrap 开发。

基本上，我有一个登录页面，可以转到白页或黑页。白页菜单为白色，黑页菜单为黑色。

根据用户访问的页面，他们会看到白色菜单或黑色菜单。

我想设置一个 cookie 来记住他们选择去哪个页面（白色或黑色），并更改导航栏和徽标（放入 div id="black" 或 div id="white" ）

这是我第一次使用 cookie，所以我不知道如何从另一个页面调用 cookie，或者如何更改 div。

这是我目前在白页中设置 cookie 的代码：

<script>
$( document ).ready(function() {
document.cookie="menu=white";
}
</script>

设置黑页cookie的代码：

<script>
$( document ).ready(function() {
document.cookie="menu=black";
}
</script>

当用户进入下一页时，如何调用cookie的值，并根据cookie的值切换到相关菜单？

我们将不胜感激。

编辑：答案

感谢 Praveen，我找到了答案。

在我的登录页面上，我将 cookie 设置为黑色或白色，如下所示：

<script>
$(document).ready(function(){
// set cookie
$.cookie('menu', 'black');
//alert( $.cookie("menu") ); --> to see that the cookie has been set
});
</script>`

将白色菜单的黑色更改为白色。

在需要读取cookie并隐藏需要隐藏的div的页面上，我是这样做的：

<script>
if ($.cookie('menu') == 'black')
{
$('.cookiewhite').hide();
}
if ($.cookie("menu") == 'white')
{
$(".cookieblack").hide();
}
// alert( $.cookie("menu") );
</script>

然后我将菜单的 div 命名为 div class="cookieblack" 或 div class="cookiewhite"

我希望这也可以帮助其他人。

【问题讨论】：

标签： jquery html twitter-bootstrap cookies

【解决方案1】：

好的，既然你是 cookie 的新手，你可以得到一个名为 jQuery.cookie 的插件的帮助。无论您需要做什么，您已经完成，这个插件都会完美地跨浏览器。

要创建 cookie，您需要执行以下操作：

$.cookie('menu', 'blue');

创建过期 cookie，从那时起 7 天：

$.cookie('menu', 'blue', { expires: 7 });

创建过期 cookie，在整个站点中有效：

$.cookie('menu', 'blue', { expires: 7, path: '/' });

读取 cookie：

$.cookie('menu'); // => "blue"
$.cookie('something'); // => undefined

上面的代码会查看用户是不是第一次来。

读取所有可用的 cookie：

$.cookie(); // => { "menu": "blue", "...remaining": "cookies" }

删除 cookie：

// Returns true when cookie was found, false when no cookie was found...
$.removeCookie('menu');

// Same path as when the cookie was written...
$.removeCookie('the_cookie', { path: '/' });

注意： 删除 cookie 时，您必须传递用于设置 cookie 的完全相同的路径、域和安全选项，除非您依赖默认选项就是。

【讨论】：

感谢 Praveen 提供的信息，我已经能够将 cookie 设置为白色。您能否协助如何从下一页获取 cookie 并根据 cookie 的值更改 div？
@Spiral57 是“读取cookie”的过程。看上面！ :D

【解决方案2】：

编辑：答案