操作cookie插件jquery.cookie用法
分类:实例代码
jquery.cookie是非常好的一款操作cookie的插件,下面就介绍一下它的用法。
首先要引入jquery库文件和此插件文件,代码如下:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
相关方法使用:
创建cookie:
$.cookie('the_cookie', 'the_value');
the_cookie是名字,the_value是要存的数据
设置过期时间:
$.cookie('the_cookie', 'the_value', { expires: 7 });
expires: 7设置有效期是7天
设置路径:
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
在默认情况下,只有设置cookie的网页才能读取该cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。 cookie的路径用于设置能够读取cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取cookie(一般不要这样设 置,防止出现冲突).
读取cookie:
$.cookie("MyCssSkin")
判断cookie是否为空:
if(cookie_skin){}
代码实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0; } fieldset, img { border: none; } img { display: block; } ul, ol { list-style: none; } input { padding-top: 0; padding-bottom: 0; font-family: "SimSun","宋体"; } select, input, textarea { font-size: 12px; margin: 0; } textarea { resize: none; } table { border-collapse: collapse; } body { font-size: 12px; color: #333; } .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { zoom: 1; } a { color: #333; text-decoration: none; } a:hover { color: #666; text-decoration: none; } ul li { float: left; margin-right: 10px; width: 20px; height: 20px; } ul li:nth-of-type(1) { background: #000; } ul li:nth-of-type(2) { background: #ccc; } ul li:nth-of-type(3) { background: #fcf; } div { width: 100%; height: 500px; } </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script> <link rel="stylesheet" href="css/1.css" id="skin" /> <script> $(function(){ $('#skin_li li').click(function(){ var index = $(this).index()+1; $('#skin').attr({'href':'css/'+index+'.css'}) $.cookie('MyCssSkin',index,{expires:7,path:'/'}); }) var cookie_skin=$.cookie("MyCssSkin"); if(cookie_skin){ $("#skin").attr({"href":"css/"+cookie_skin+".css"}); $.cookie("MyCssSkin",cookie_skin,{path:'/', expires:7 }); } }) </script> </head> <body> <ul class="clearfix" id="skin_li"> <li></li> <li></li> <li></li> </ul> <div class="d"></div> </body> </html>
上面是一个换肤的代码实例,当然它无法演示效果,因为没有对应的css文件。
但是代码是正确的,能够实现换肤后,刷新页面仍然保持皮肤的功能,这就是cookie所起到的作用。
操作cookie插件jquery.cookie用法,这样的场景在实际项目中还是用的比较多的,关于操作cookie插件jquery.cookie用法就介绍到这了。
操作cookie插件jquery.cookie用法属于前端实例代码,有关更多实例代码大家可以查看。