Jquery.cookie使用实例1

引用文件头
 <script src="http://blog.163.com/m13864039250_1/blog/../../JS/jquery-1.8.0.min.js"></script>
 <script src="http://blog.163.com/m13864039250_1/blog/../../JS/jquery.cookie.js"></script>

1.简单字符串，cookie操作

  <script type="text/javascript">
        //Jquery Cookie使用实例
        $(function () {
            var cookieOne = 'green';
            $(":button:first").click(function () {
                //$.cookie("cookieOne", cookieOne);//如果不指定过期时间，则当浏览器关闭的时候cookie清楚
                $.cookie("cookieOne", cookieOne, {expires:7});//指定过期时间，单位为天
                $("#cookeOne").css("background-color","blue");
            });
            $(":button:eq(1)").click(function () {
                var ul = $("<ul></ul>");
                var li = $("<li></li>");
                var result = $.cookie("cookieOne");//获取结果，指定key对应的value
                li.text("Value:" + result);
                ul.append(li).appendTo($("#cookieOne"));
                $("#cookieOne").css("background-color", $.cookie("cookieOne"));
            });
        });
    </script>

    <input  type="button" value="存入cookie"/>
    <input  type="button" value="检索cookie"/>
    <div id="cookieOne"></div>

2.数组操作：

 <script type="text/javascript">
        $(function () {
            var data = ["abc", "123", "zhangsan"];
            //存入，默认支持输出存储
            $(":button:first").click(function () {
                $.cookie("cookieTwo", data, { expires: 365 });
            });
            //检索cookie，检索数组结果是数组的字符串形式，逗号分隔
            $(":button:eq(1)").click(function () {
                var result = $.cookie("cookieTwo");
                $("#cookieOne").text(result);
            });
            //删除
            $(":button:last").click(function () {
                $.removeCookie("cookieTwo");
                alert("删除成功");
            });
        });
    </script>

    <input  type="button" value="存入cookie"/>
    <input  type="button" value="检索cookie"/>
    <input  type="button" value="删除cookie"/>
    <div id="cookieOne"></div>

1.输出存入状态：

 2.数组检索出，状态

3.删除cookie，原理是将cookie的时间设置为过期

 

3.简单json对象操作

  <script type="text/javascript">
        $(function () {
            var completeData = {
                data: '张三',
                inputDate: new Date().toLocaleString(),
                inputCount: 5
            };
            $.cookie.json = true;//此属性可以设置，cookie类支持json对象存储（作用于存入和读取）
            //存入
            $(":button:first").click(function () {
                $.cookie("objectOne", completeData, {expires:365});
            });
            //检索
            $(":button:last").click(function () {
                var result = $.cookie("objectOne");
                $("#cookieList").text(result.data);
            });
        });
    </script>

 <div id="cookieList"></div>
    <input  type="button" value="存入cookie"/>
    <input type="button" value="检索cookie" />

1.存入结果：                                                2.显示结果：

  

 

4.Cookie的跨页面操作

默认存入cookie的时候如果没有制定path则存入的值为当前页面的文件夹，也就是说在同一个文件夹中的页面可以获取同一个key对应的cookie的值。

<script type="text/javascript">
        $(function () {
            //跨页面获取cookie
            var shareData = [
                { num: 1, name: 'zhangsan' },
                { num: 2, name: '李四' },
                { num: 2, name: '小明' }
            ];
            $.cookie.json = true;
            //存入
            $(":button:first").click(function () {
                $.cookie("share", shareData, { expires: 365, path: '/' });
                alert("存入成功");
            });
            //检索
            $(":button:last").click(function () {
                var result = $.cookie("share");
                $("#cookieList").html("num:" + result[0].num + " ,name: " + result[0].name);
                $("#cookieList").append("<br>");
                $("#cookieList").append("num:" + result[1].num + " ,name: " + result[1].name);
                $("#cookieList").append("<br>");
                $("#cookieList").append("num:" + result[2].num + " ,name: " + result[2].name);
            });
            //删除cookie
            $(":button:eq(1)").click(function () {
                $.removeCookie("share", {path:'/'});
                alert("删除cookie");
            });
        });
    </script>

1.存入结果：

 a.显示指定path属性可以实现cookie的跨页面访问
b.检索cookie 的时候不可以指定路径
c.如果显示指定path属性，存入的cookie键值对，需要指定同样的参数删除

6.cookie 插件的path问题：
a.检索cookie 的时候不可以指定路径
b.cookie的路径为cookie存储的逻辑目录，相对路径目录
c.同一个domain中的cookieID就是键值不能相同，如果相同获取值时会出现错误，总是获取目录级最外层的值。

 

更多：

jquery.cookie.js 使用整理（一）

 cookie 跨域访问整理

 在浏览器中加密Cookie