Question

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

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

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

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

这是我第一次使用cookies，所以我不知道如何从其他页面调用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”

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

Answer 1

好的，既然您是Cookie的新手，您可以获得名为jQuery.cookie的插件的帮助。无论你需要做什么，你已经完成了，通过这个插件完全跨浏览器。

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

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

从那时起7天内创建过期的Cookie：

$.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的完全相同的路径，域和安全选项，除非您'依赖于默认选项。

Answer 2

编辑：答案

我得到了答案，感谢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命名为菜单＆＃39; div class =＆＃34; cookieblack＆＃34;或div class =＆＃34; cookiewhite＆＃34;

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

设置cookie以更改Bootstrap菜单

2 个答案: