Jquery.cookie使用实例1

布满荆棘的人生 2022-02-21 18:52 206阅读 0赞

引用文件头  
 <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.输出存入状态：

![2019041111112681.png][]

2.数组检索出，状态

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70][]

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.显示结果：

![20190411111307934.png][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1][]

**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.存入结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 2][]

** a.显示指定path属性可以实现cookie的跨页面访问  
b.检索cookie 的时候不可以指定路径  
c.如果显示指定path属性，存入的cookie键值对，需要指定同样的参数删除**  
  
6.cookie 插件的path问题：  
a.检索cookie 的时候不可以指定路径  
b.cookie的路径为cookie存储的逻辑目录，相对路径目录  
c.同一个domain中的cookieID就是键值不能相同，如果相同获取值时会出现错误，总是获取目录级最外层的值。

更多：

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

[ cookie 跨域访问整理][cookie]

[ 在浏览器中加密Cookie][Cookie]

[2019041111112681.png]: /images/20220221/c3b12bba181640b692338774c3a243f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70]: /images/20220221/c3f5ae8d1f194e4ca5e80a729bf590bf.png
[20190411111307934.png]: https://img-blog.csdnimg.cn/20190411111307934.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 1]: /images/20220221/e24850e7014f4e4dba136d7342d714d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExMjcwMTk_size_16_color_FFFFFF_t_70 2]: /images/20220221/b38a7b35a0c542dd812ae9d034f17066.png
[jquery.cookie.js]: https://blog.csdn.net/u011127019/article/details/89205518
[cookie]: https://blog.csdn.net/u011127019/article/details/78835806
[Cookie]: https://blog.csdn.net/u011127019/article/details/18552275

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关数组-接口5-使用实例1(两数之和)

题目和示例 ![6c62f57f193e4cb1ac447e4aff1f7141.png][] 解题思路：其实没感觉什么哈希表，就是暴力破解法，不过暴力破解经过

清疚/ 2023年10月03日 00:01/ 0 赞/ 7 阅读

相关 sqoop应用实例1

sqoop的简单应用：需求：先将hive中的数据表wordcount中的数据导入到mysql数据库中； hive数据表查看： ![Sou

落日映苍穹つ/ 2022年08月27日 04:47/ 0 赞/ 195 阅读

相关 hive应用实例1

我们沿用之前hadoop wordcount的结果数据： \[hadoop@icity0 ~\]$ hadoop fs -cat /wc/out/part-r-00000

Myth丶恋晨/ 2022年08月27日 04:42/ 0 赞/ 143 阅读

相关 Selenium使用Xpath定位元素及实例(1)

1. 绝对路径/ 例子：①查找根元素，即/A(红色) ②查找A下面的C元素，即/A/C（绿色） ③查找A下面D的子元素B,即/A/D/B（

￡神魔★判官ぃ/ 2022年06月14日 03:50/ 0 赞/ 305 阅读

相关使用Struts1.x实现用户登录实例

1.首先我们要将Struts1所需要的jar包导入到工程里。所需的jar包如下图： ![这里写图片描述][SouthEast] --------------------

红太狼/ 2022年06月04日 00:14/ 0 赞/ 220 阅读

相关 Libevent使用实例1 (简单)

客户端： include<event2/event-config.h> include<sys/types.h> include<sys/s

雨点打透心脏的1/2处/ 2022年05月11日 08:40/ 0 赞/ 307 阅读

相关 python学习实例（1）

====================================== 1.2 计算机编程的基本概念 ======================

逃离我推掉我的手/ 2022年05月08日 14:03/ 0 赞/ 265 阅读

相关 Drools5.0.1使用excel实例

本文中所有文件在同一Package下： excelDrools.drt//规则编译模板 template header space chageNum

红太狼/ 2022年03月19日 18:14/ 0 赞/ 282 阅读

相关 Jquery.cookie使用实例1

引用文件头 <script src="http://blog.163.com/m13864039250\_1/blog/../../JS/jquery-1.8.0.min

布满荆棘的人生/ 2022年02月21日 18:52/ 0 赞/ 207 阅读

相关 makefile实例（1）-helloworld

简单makefile实例 1，源文件： main.cpp include <stdio.h> int main() {

╰半夏微凉°/ 2021年11月16日 08:20/ 0 赞/ 241 阅读