做过web开发的小伙伴对于Cookie一定不陌生，当用户登录后将用户的账号保存到本地，密码保存时，建议使用MD5进行加密，以防止用户个人信息的泄露。今天和大家简单聊聊关于Jquer Cookie的使用，一便我们接下来的开发中使用更方便。好了下面我们开始今天今天的内容：操作Cookie无非是存、取、删，下面就一起简单学一下jQuery Cookie的使用。
jquery cookie常用操作：
$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等
相信一些小伙伴已经急不耐了，鼠标右键创建文件夹，导入下载好相应的js文件，打开记事本，编写我们的测试页面，ok，写好了，打开，发现浏览器并没有保存Cookie中的值，然后检查js文件是否引用正确，各种一阵盲测，发现什么也没写错，开始怀疑人生了。上面就是小编做过的蠢事，但是这是为什么呢？首先写的没错，错就错在肯定是在本地测试的，cookie是基于域名来储存的。意思您要把它放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。是不是很无奈，那就按照上面的逻辑走一下，创建一个java web，然后把我们的代码拷进去，部署到Tomcat上，通过浏览器测试，问题解决了。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Cookie测试</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="jquery-1.10.2.min.js" ></script> <script src="jquery.cookie.js" ></script> </head> <body> <input type="text" name="name" id="name" /><br/> <input type="password" name="password" id="password" /><br/> <input type="submit" class="submit" value="保存（随浏览器的生命周期）" /> | <input type="submit" class="submit" value="获取" /> | <input type="submit" class="submit" value="保存（设置生命周期）" /> | <input type="submit" class="submit" value="删除1" /> | <input type="submit" class="submit" value="删除2" /> | <input type="submit" class="submit" value="新建一个cookie 包括有效期 路径 域名"/> <script> $(".submit").bind("click", function(){ var index = $(this).index(); if(4 == index){ $.cookie("password", $("#password").val());//生命周期：创建到浏览器关闭 }else if(5 == index){ alert($.cookie("password"));//获得Cookie中的值 }else if(6 == index){ $.cookie("password", $("#password").val(), { expires: 7 }); //设置带时间的cookie，当前设置Cookie的生命周期是一周 }else if(7 == index){ $.cookie('password', '', { expires: -1 }); // 删除 }else if(8 == index){ $.cookie('password', null); // 删除 cookie }else if(9 == index){ $.cookie('password', $("#password").val(), {expires: 7, path: '/', domain: 'http://localhost:8080/', secure: true});//新建一个cookie 包括有效期 路径 域名等 } }); </script> </body> </html>
最后附上jquery和jquery Cookie的下载地址：jquery（http://jquery.com/download/）、jquery Cookie（http://plugins.jquery.com/cookie/）