jQuery常用插件——cookie插件

最新推荐文章于 2024-08-09 07:58:04 发布

kehukehu_kehu

最新推荐文章于 2024-08-09 07:58:04 发布

阅读量336

点赞数

分类专栏： jQuery常用插件文章标签： jquery 插件 cookie 对象

本文链接：https://blog.csdn.net/kehukehu_kehu/article/details/71194845

版权

jQuery常用插件专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一个轻量级的cookie 插件，可以读取、写入、删除 cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录

1.语法

（1）调用格式：$.cookie(key，value，[option])

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

（2）保存：$.cookie(key，value)

（3）读取：$.cookie(key)

（4）删除：$.cookie(key，null)

（5）[option]参数说明：

1）expires

定义cookie的有效日期，可以是一个整数（从创建cookie时算起，以天为单位）或一个Date对象。

注：当指明了cookie有效时间时，所创建的cookie被称为“持久 cookie （persistent cookie）”。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。

2）path　　

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

注：若想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'；若想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:

$.cookie('the_cookie', null, { path: '/'，domain: 'example.com' })

3）domain　　

cookie域名属性，默认与创建页域名一样。　　

注：这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置".xxx.com"

4） secrue:　　

一个布尔值，表示传输cookie值时，是否需要一个安全协议（HTTPS）。默认值为false，若为true，则需要HTTPS。

5）raw

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

要关闭这个功能设置 raw: true 即可。

2. jquery.cookie.js 的配置

首先包含jQuery的库文件，再在后面包含 jquery.cookie.js 的库文件。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

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

3.实例

一个完整设置与读取cookie的页面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery学习2</title>
    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script src="jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#username").val($.cookie("username"));
            if ($.cookie("like") == "刘德华") {
                $(":radio[value='刘德华']").attr("checked", 'checked')
            }
            else {
                $(":radio[value='张学友']").attr("checked", 'checked')
            }
            $(":button").click(function () {
                $.cookie("username", $("#username").val(), {
                    path: "/", expires: 7
                })
                $.cookie("like", $(":radio[checked]").val(), {
                    path: "/", expiress: 7
                })
            })
        })
    </script>
</head>
<body>
    <p><input type="text" id="username" value="" /></p>
    <p>
        <input type="radio" name="like" value="刘德华" />刘德华
        <input type="radio" name="like" value="张学友" />张学友
    </p>
    <p><input type="button" value="保存" /></p>
</body>
</html>

cookie本质上是一个txt文本，因此只能够存入字符串，对象通常要序列化之后才能存入cookie，而取的时候要反序列才又能得到对象。

$(function () {
            if ($.cookie("student") == null) {
                var student = { name: "张三", age: 24 };
                var str = JSON.stringify(student);　　//对序列化成字符串然后存入cookie
                $.cookie("student", str, {
                    expires:7   //设置时间，如果此处留空，则浏览器关闭此cookie就失效。
                });
                alert("cookie为空");
            }
            else {
                var str1 = $.cookie("student");
                var o1 = JSON.parse(str1);　　//字符反序列化成对象
                alert(o1.name);　　　　　　　　//输反序列化出来的对象的姓名值
            }
        })

更多关于jQuery的cookie操作技巧请看http://www.jb51.net/Special/378.htm