jquery - Set cookie to change Bootstrap Menu -

i have html website, developed using bootstrap.

basically have landing page goes either white page, or black page. on white page, menu white, , on black page menu black.

depending on page user visits, see either white menu, or black menu.

i want set cookie remember page have selected go (white or black), , change navbar , logo (put in div id="black" or div id="white" )

this first time ever working cookies, have no idea how call cookie page, or how change div.

this code far set cookie in white page:

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

code set cookie in black page:

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

when users go next page, how call value of cookie, , change relevant menu, depending on value of cookie?

some guidance appreciated.

edit : answer

i found answer, praveen.

on landing pages, set cookies either black or white, follows:

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

changing black white white menu.

on page needs read cookie , hide div needs hidden, follows:

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

i named div's menu's div class="cookieblack" or div class="cookiewhite"

i hope can assist other people too.

okay, since newbie cookies, can of plugin called jquery.cookie. whatever need do, have done, taken care cross browser plugin.

to create cookie, need this:

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

create expiring cookie, 7 days then:

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

create expiring cookie, valid across entire site:

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

read cookie:

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

the above code see if user coming first time.

read available cookies:

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

delete cookie:

// returns true when cookie found, false when no cookie found... $.removecookie('menu');  // same path when cookie written... $.removecookie('the_cookie', { path: '/' }); 

note: when deleting cookie, must pass exact same path, domain , secure options used set cookie, unless you're relying on default options is.