Cookie插件cookie（如何调用jQuery插件学习第三天）

在jQuery中，引入cookie插件后，可以很方便地定义某个Cookie名称，并设置Cookie值。通过设置好的Cookie，可以很便利地保存用户的页面浏览记录。在用户选择保存的情况下，还可以保存用户的登录信息。

示例cookie插件的使用：

（1）插件文件：

Js-8-3/jquery.cookie.js

（2）下载地址：

http://plugins.jquery.com/project/cookie

（3）功能描述：

在示例中，再增加一个是否保存用户名的复选框，当选中复选框时，并单击“提交”按钮，完成Cookie的设置。重新打开浏览器时，由于使用了Cookie保存用户名，在用户名文本框中显示上次登录的用户名；如果输入用户名后不选中复选框，单击“提交”按钮将销毁已存在的Cookie对象。

（4）实现代码：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.cookie.js"></script>

<style type="text/css">
    ....省略样式代码
</style>

<script type="text/javascript">
    $(function(){
        if ($.cookie("UserName")){  //如果有值显示在文本框中
            $("#UserName").val($.cookie("#UserName"));
        }
        $("#sbtUser").submit(function(){  //表单提交事件
            //如果选中了保存"用户名"项
            if($("#chkSave").attr("checked")){  //设置Cookie值
                $.cookie("UserName",$("#UserName").val(),{
                    path:"/",expires:7
                })
            }
            else {  //销毁Cookie值
                $.cookie("UserName",null,{
                    path:"/"
                })
            }
            return false  //表单不提交
        })
    })
</script>

<form id="frmUserInfo" method="get" action="#">
    <div class="divFrame">
        <div class="divTitle">
            用户登录
        </div>
        <div class="divContent">
            <div>
                用户名：<br />
                <input id="UserName" name="UserName" type="text" class="txt" />
            </div>
            <div>
                密码：<br />
                <input id="UserPass" name="UserPass" type="password" class="txt" />
            </div>
            <div>
                <input id="chkSave" type="checkbox" />
                是否保存用户名
            </div>
        </div>
        <div class="divBtn">
            <input id="sbtUser" type="submit" value="提交" class="btn" />
        </div>
        <div id="divData"></div>
    </div>
</form>

（5）代码分析：

在导入cookie插件后，可以通过一个全局性的方法管理客户端的Cookie对象，格式如下：

$.cookie(名称,值,[option])

如果是写入或设置Cookie值，其调用的格式如下：

$.cookie(cookieName,cookieValue)

其中，参数"cookieName"表示要设置的Cookie名称，"cookieValue"表示相对应的值。

如果是读取Cookie值，其调用的格式如下：

$.cookie(cookieName)

其中，参数"cookieName"表示要读取的Cookie名称。

如果是销毁Cookie值，其调用的格式如下：

$.cookie(cookieName，NULL)

其中，参数"cookieName"表示要销毁的Cookie名称。在销毁的Cookie时，其可选项参数中的路径(path)和域名(domain)必须与设置时一样，否则不能销毁。

另外，在$.cookie方法中，可选项参数[option]以对象的形式展示，用于补充说明设置的cookie对象，其常用属性如下：

$.cookie(cookieName,cookieValue,{
    expires:    //有限日期，可以是一个整数或一个日期(单位：天)
    path:       //Cookie值被保存的路径，默认值与创建页路径一致
    domin:      //Cookie域名属性，默认值与创建页域名一样
    secure:     //一个布尔值，表示传输Cookie值时，是否需要一个安全协议
})

Cookie插件cookie（如何调用jQuery插件学习第三天）

示例cookie插件的使用：

猜你喜欢