jquery.cookie组件小总

今天分享的是 jquery.cookie:这是一个轻量级的cookie插件，可以从浏览器上创建，读取，写入，删除cookie；当然cookie虽然是保存在浏览器上，但是一定要上传到服务器才能看到结果；

下载地址：http://www.jq22.com/   进入后搜索jquery.cookie就行；

无论是B/S还是C/S,实际开发中，我觉得用到cookie最多的地方就是登录页记住密码

下面我介绍一下这个插件的几个属性：

step 1：创建cookie

$.cookie('the_cookie', 'the_value');有两个参数，一个是你创建的cookie的名称，第二个是你要往cookie里面存的值；当然，上面这种写法创建的cookie的生命周期是浏览器关闭为止；

$.cookie('the_cookie', 'the_value', { expires: 7 }); 第三个参数是你创建cookie的生命周期，单位为天

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 

置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这 

个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突） 。 

4.读取cookie： 

step 2:读取cookie

如果你想读取cookie，你则是根据你设置的cookie的名称来读取

$.cookie("the_cookie");

step 3:删除cookie

删除cookie其实就是变相的创建cookie的一个过程，上面我们创建cookie时直接保存了对应要保存的值，那么删除cookie其实就是保存时赋值为空；

$.cookie("the_cookie",null)//官网上的这种写法我不太支持，因为我试过，当给cookie赋值为努力时，下次登录的时候，浏览器会直接把null拿出来放到对应的位置，并不算是彻底的删除了cookie；所以我推荐的写法是：

$.cookie("the_cookie","");

==========================================================================================

下面是几个不太常用的参数，大概做一介绍，实际开发中完全可以不用：

1).expires: 365 

定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对 

象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。 

2).path: '/' 

默认情况：只有设置cookie的网页才能读取该cookie。 

定义cookie的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为） 。 

如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'。如果你想删除一个定义 

了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, 

{ path: '/' });。 domain: 'example.com' 

默认值：创建 cookie的网页所拥有的域名。 

3).secure: true 

默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。 

4).raw: true 

默认值：false。 

默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码， 

decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。

============================================================================================

下面我给大家把我开发过程中的一段代码写出来，可以供大家参考：

项目背景：springMVC+spring data jpa

开发模块：登录时记住密码功能

step 1：导入相关包

<script src="res/skin/default/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="res/skin/default/js/jquery.cookie.js"></script>

step 2：jsp代码

<input type="text" id="userName" name="userName" placeholder="请输入账号/电话号码/别名"/>

<input type="passWord" id="passWord" name="passWord" placeholder="请输入密码"/>

<input id="rememberPassword" type="checkbox";">记住密码

step 3:jquery代码

<script>

//step 1:当鼠标点击复选框时，创建一个持久化的cookie

var userName=null;

var passWord=null;

  //限制为：鼠标点击登录时判断：

  $("#submit").click(function(){
  //如果被选中状态，则创建cookie

if($("#rememberPassword").attr("checked")){
//创建cookie，并将用户名和密码保存进去

$.cookie('userName',$('#userName').val(), { expires: 7});

$.cookie('passWord',$('#passWord').val(), { expires: 7});
}else{

//如果复选框没有被选中，则删除cookie

$.cookie('userName', ""); 

$.cookie('passWord', ""); 

}

     });
 

//页面每次被加载的时候，都把cookie中的值取出来，然后存放到对应的文本框中
 $(function(){

 
  var userName=$.cookie('userName');

var passWord=$.cookie('passWord');

$("#userName").val(userName);

$("#passWord").val(passWord);

  if(userName!=null&&userName!=""&&passWord!=null&&passWord!=""){

$("#rememberPassword").attr("checked",true);

}

}); 

</script>