jquery.cookie.js $.cookie()是怎么使用

jquery.cookie() 方法的使用(读取、写入、删除)

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

1、会话cookie:

$.cookie('the_cookie', 'the_value');

当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为会话cookie；

 

2.创建一个cookie并设置有效时间为 7天: 

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

当指明了cookie有效时间时，所创建的cookie被称为“持久 cookie （persistent cookie）”。

 

3.创建一个cookie并设置 cookie的有效路径：

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

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

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

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

 

4.读取cookie： 

$.cookie('the_cookie'); // cookie存在 => 'the_value' 

$.cookie('not_existing'); // cookie不存在 => null 

 

5.删除cookie，通过传递null作为cookie的值即可：

$.cookie('the_cookie', null); 

关于记住密码这个功能的实现：

一个页面简单的登录页面：

<form action="xxx/user/signIn" method="post" >
    <input type="text" id="username" name="username"  placeholder="请输入用户名" />
    <input type="password"  id="password" name="password"  placeholder="请输入密码" />
    <input type="checkbox" id="remember"> 记住用户名和密码
    <button type="submit" class="btn btn-success" id="btn_login">登  录</button>
    <button type="reset" class="btn btn-default">重  置</button>
</form>

$(document).ready(function(){
    //页面初始化时，如果是记住密码了，给输入框赋值。
    if($.cookie("remember") == "true"){
        $("#remember").prop("checked", true);
           $("#username").val($.cookie("username"));
           $("#password").val($.cookie("password"));
       }    

    //点击确定按钮，将记录状态信息存在cookie，同时submit；
    $("#btn_login").on("click",function(){
        remember();
        return true;
    });

    //记录用户名密码。以及是否要记住。保存在cookie;
    function remember(){
        var checked = $("#remember").prop("checked");
        if(checked == "checked" || checked) {
            var username = $("#username").val();
            var password = $("#password").val();
            $.cookie("remember", "true", {expires: 30});
            $.cookie("username", username, {expires: 30});
            $.cookie("password", password, {expires: 30});
        }else{
            $.cookie("remember", "false", {expires: -1});
            $.cookie("username", "", {expires: -1});
            $.cookie("password", "", {expires: -1});
        }
    }
    
    //监听记住选择框是否选中，如果未选中，cookie中则不记录。
    $("#remember").on("change", function(){
        var checked = $("#remember").prop("checked");
        if(checked == "checked" || checked) {

        }else{
              $.cookie("remember", "false", {expires: -1});
              $.cookie("username", "", {expires: -1});
              $.cookie("password", "", {expires: -1});
          }
    }); 
});