Hello Friends,

I have been trying to make a simplified colorswitcher with jQuery, for my site. I have managed to swicth the colors of links and background. Here is the fiddle : Fiddle

Here is the code i have used :

HTML

Code:
<div class="colormenu">
<ul class="colchange">
<li class='red'><a href='#' class='click' data-color='#e74c3c'></a></li>
<li class='green'><a href='#' class='click' data-color='#2ecc71'></a></li>
<li class='blue'><a href='#' class='click' data-color='#3498db'></a></li>
<li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a></li>
<li class='black'><a href='#' class='click' data-color='#222'></a></li>
<li class="links"><a href="#">Changer</a></li>
</ul>
</div>

<div class="bar2">this is Bar 2</div>
<div class="bar3"></div>
CSS

Code:
body {background: #E2E2E2;font-family:Tahoma, sans-serif;}
.bigbar{ background: #FFF;height:50px;line-height:50px;padding:0px 20px;
}
.bar2, .bar3 { background: #FFF;height:50px;line-height:50px;padding:0px 20px;box-shadow: 0px 0px 8px #111;margin-top:30px;}

.colormenu{ width:auto; height:40px;line-height:40px;background:#FFF;padding: 10px; }
.colormenu ul { margin: 0; padding:0; }
.colormenu ul li { list-style:none;margin:0;display:inline-block;}
.colormenu ul li a { padding: 10px 20px;display:inline;box-shadow: 0px -1px 2px rgba(0,0,0,0.2);}
.red { background: #e74c3c; }
.green { background: #2ecc71; }
.blue { background: #3498db; }
.yellow { background: #f1c40f; }
.black { background: #222; }
.links {float:right;}
.linkcolor { color: #999; }
jQuery

Code:
jQuery(document).ready(function($){ 
$('.click').on('click', function(e) {
$('body, .bar3').css('background', $(this).data('color')); 
$('a:link, .bar2').css('color', $(this).data('color')); 
});
});
Now i want to add cookie function so the browser could remember the preference.
My knowledge is limited as per cookie function so i request you guys would help me.
Thanks in advance

regards