jquery中cookie用法实例详解(获取,存储,删除等)

这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以参考下

本文实例讲述了jquery中cookie用法。分享给大家供大家参考,具体如下:

cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法。

使用JQuery操作cookie时 发生取的值不正确的问题:
结果发现cookie有四个不同的属性:
名称,内容,域,路径

?
1
2
3
4
$.cookie('the_cookie'); // 读取 cookie
$.cookie('the_cookie', 'the_value'); // 存储 cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // 存储一个带7天期限的 cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除 cookie

使用:

复制代码 代码如下:
$.cookie("currentMenuID", menuID);

时 未指定域和路径。

 

所有当域和路径不同时会产生不同的cookie

复制代码 代码如下:
$.cookie("currentMenuID");

取值时会产生问题。

 

故:

复制代码 代码如下:
$.cookie("currentMenuID", "menuID", { path: "/"});

进行覆盖。同域下同一个cookieID对应一个值。

 

下面我们来看个实例

关于cookie的path设置需要注意,如果不设置path:'/'的话,path则会根据目录自动设置[如:http://www.xxx.com/user/,path会被设置为 '/user']

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$.extend({
/**
 1. 设置cookie的值,把name变量的值设为value 
example $.cookie('name', ‘value');
 2.新建一个cookie 包括有效期 路径 域名等
example $.cookie('name', ‘value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true});
3.新建cookie
example $.cookie('name', ‘value');
4.删除一个cookie
example $.cookie('name', null);
5.取一个cookie(name)值给myvar
var account= $.cookie('name');
**/
  cookieHelper: function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
      options = options || {};
      if (value === null) {
        value = '';
        options.expires = -1;
      }
      var expires = '';
      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
        var date;
        if (typeof options.expires == 'number') {
          date = new Date();
          date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
        } else {
          date = options.expires;
        }
        expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
      }
      var path = options.path ? '; path=' + options.path : '';
      var domain = options.domain ? '; domain=' + options.domain : '';
      var secure = options.secure ? '; secure' : '';
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
      var cookieValue = null;
      if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = jQuery.trim(cookies[i]);
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) == (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }
  }
});

Jquery操作Cookie记录用户查询过信息

这是一个Cookie数据生成的列表,

每次单击查询会存储一个域名,并把最后一次查询的域名放在最上方。本例子最多存储10个,大家可以根据自己情况进行设置

下在咱们一起来看看是怎么实现的吧

先写一个操作Cookie的JS文件如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
function getid(id) {
return (typeof id == 'string') ? document.getElementById(id) : id
};
function getOffsetTop(el, p) {
var _t = el.offsetTop;
while (el = el.offsetParent) {
if (el == p) break;
_t += el.offsetTop
}
return _t
};
function getOffsetLeft(el, p) {
var _l = el.offsetLeft;
while (el = el.offsetParent) {
if (el == p) break;
_l += el.offsetLeft
}
return _l
};
var currentInput = null;
function BoxShow(e) {
var input = e;
if (!input.id) {
input = e.target ? e.target : e.srcElement;
}
currentInput = input;
FillUrls("site");
var box = getid("allSitesBoxHdl");
if (box.style.display == 'block' && currentInput.id == input.id) {
return;
}
box.style.left = (getOffsetLeft(input)) + 'px';
box.style.top = (getOffsetTop(input) + (input.offsetHeight - 1)) + 'px';
box.style.width = (input.offsetWidth - 4) + 'px';
box.style.display = 'block';
}
function BoxShowUrls(e) {
BoxShow(e);
}
function InputSetValue(val) {
var obj = currentInput;
obj.value = val;
if (obj.getAttribute('url') == 'true') {
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
tags[i].value = val;
}
}
}
BoxHide();
}
//删除时使用,传入一个要删除的值就可以删除
function DelAllSitesValue(value) {
var allSites = $.cookie("site");
allSites = allSites.replace(value + "|", "");
$.cookie("site", allSites, { expires: 7 });
FillUrls("site");
}
function BoxHide() {
if (getid("allSitesBoxHdl")) {
getid("allSitesBoxHdl").style.display = 'none';
}
}
//加载列表
function FillUrls(cookieName) {
var urls = $.cookie(cookieName);
var html = "";
if (urls) {
var urllist = urls.split('|');
var forlength = 0;
var stringcookie;
for (var i = urllist.length - 1; i >= 0; i--) {
var textval = urllist[i];
if ($.trim(textval) != "" && $.trim(textval) != "undefined") {
html += "<li class="lis"><a href="javascript:InputSetValue('" + textval + "');">" + textval + "</a></li><br/>";
forlength = forlength + 1;
if (forlength > 10) {
$.cookie("site", stringcookie, { expires: 7 });
break;
} else {
stringcookie = textval + "|" + stringcookie;
}
}
}
} else {
html += "<li>没有记录</li>"
}
getid("allSitesBoxContent").innerHTML = html;
}
function closeIME(e) {
var obj = e.target ? e.target : e.srcElement;
obj.style.imeMode = 'disabled';
}
function OnPaste(e) {
var obj = e.target ? e.target : e.srcElement;
setTimeout("MoveHttp('" + obj.id + "')", 100);
}
function MoveHttp(id) {
var val = getid(id).value;
val = val.replace("http://", "");
if (val[val.length - 1] == '/') {
val = val.substring(0, val.length - 1);
}
getid(id).value = val;
}
function OnKeyup(e) {
var obj = e.target ? e.target : e.srcElement;
setTimeout("addInput('" + obj.id + "')", 200);
}
function addInput(id) {
var obj = getid(id);
//如果是一个没有True的input不执行
if (obj.getAttribute('url') == 'true') {
if (obj.value.indexOf('。') > 0) {
obj.value = obj.value.replace('。', '.');
}
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
tags[i].value = obj.value;
}
}
}
}
function Init() {
$("#allSitesBoxHdl")[0].style.display = 'none';
$(":text").each(function () {
$(this).bind("keyup", OnKeyup);
$(this).bind("mousedown", BoxShowUrls);
$(this).bind("mouseout", BoxHide);
$(this).bind("focus", closeIME);
$(this).bind("paste", OnPaste);
$(this).bind("mouseout", BoxHide);
$(this)[0].setAttribute('autocomplete', 'off');
});
//取出Cookie
var icpSite = $.cookie("site");
if (icpSite) {
//取出Cookie不为空的话就给当前框
icpSite = icpSite.split('|')[0];
$("#site").val(icpSite);
}
}

在这里面还附带了这样一个效果,就是同时输入多个输入框的值,如下图

如果那个输入框要使用这样的效果只要添加一个属性为url="true"就行了,这样方便 可操作性强,想给那个框加效果就加上这个属性,不想加的直接不加url="true"
就OK了。

在使用这个效果的界面添加如下代码

?
1
2
3
4
5
6
7
8
<div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"
  onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
  <ul id="allSitesBoxContent">
  </ul>
</div>
<script type="text/javascript">
Init();
</script>

除此之外的JS直接放在一个Js文件里,引用进来就行了
下拉列表是怎么加载的呢?看下面的一个方法就知道了

加载列表

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function FillUrls(cookieName) {
var urls = $.cookie(cookieName);
var html = "";
if (urls) {
var urllist = urls.split('|');
var forlength = 0;
var stringcookie;
for (var i = urllist.length - 1; i >= 0; i--) {
var textval = urllist[i];
if ($.trim(textval) != "" && $.trim(textval) != "undefined") {
html += "<li class="lis"><a href="javascript:InputSetValue('" + textval + "');">" + textval + "</a></li><br/>";
forlength = forlength + 1;
if (forlength > 10) {//在这里我只加载10条,大家可以根据自己的情况进行调整
$.cookie("site", stringcookie, { expires: 7 });
break;
} else {//如果超出10个的话就取最后10个
stringcookie = textval + "|" + stringcookie;
}
}
}
} else {
html += "<li>没有记录</li>"
}
getid("allSitesBoxContent").innerHTML = html;
}

完成了这些之后我们只需要在单击查询时进行存储Cookie就行了,看下面的方法

操作Cookie类

?
1
2
3
4
5
6
7
8
9
10
11
12
13
function setCookie(name, value) {
var oldcookie = $.cookie(name);
if (oldcookie == null) {
$.cookie(name, value, { expires: 7 });
} else {
if ($.cookie(name).indexOf(value) == -1) {
$.cookie(name, oldcookie + "|" + value, { expires: 7 });
} else {
$.cookie(name, oldcookie.replace(value, "") + "|" + value, { expires: 7 });
}
}
FillUrls(name);
}

调用 时这样写

复制代码 代码如下:
setCookie("site", strdomin);

好了功能完成。

 

进行具体的测试

代码写的不是很好,希望大家多提提建议,我们进行相应修改争取更完善。

Cookie是存储的客户端的,一个并且只能访问同域名下的Cookie,子域名之间可以相互访问,只要加上domain属性就行了,存储的方法如下

复制代码 代码如下:
$.cookie("domain", value, { expires: 7, domain: "7c.com" });

取的时间直接写 $.cookie("domain");就好了,只要是子域名,都这样调用,这样可以达到本域名下的Cookie共享的功能。

 

Cookie的有效利用会给我们的网站带来N多意想不到的效果和功能,大家交流下

更多关于jQuery操作cookie相关内容可查看本站专题:《jQuery的cookie操作技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

转载于:https://www.cnblogs.com/lhlong/p/5946406.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402865.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js计算日期差;js计算天数差

场景&#xff1a;首先要注意两种情况 1.只是计算年月日的天数差&#xff0c;例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差1天 2.计算包含时分秒的天数差&#xff0c;例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差0天 3.注意safari浏览器 将时分秒的转化为时间戳…

非常全的VsCode快捷键

From: https://segmentfault.com/a/1190000007688656 常用 General 按 Press功能 FunctionCtrl Shift P&#xff0c;F1显示命令面板 Show Command PaletteCtrl P快速打开 Quick OpenCtrl Shift N新窗口/实例 New window/instanceCtrl Shift W关闭窗口/实例 Close wind…

Iptables-Fail2ban处理bind 非法***

早上发现DNS流量有些异常&#xff0c;查了query.log日志如下: 9-Apr-2013 13:49:33.418 queries: info: client 199.19.213.88#25345: view other_user: query: isc.org IN ANY ED (183.60.126.74) 09-Apr-2013 13:49:33.475 queries: info: client 199.19.213.88#25345: view …

通过挂载系统光盘搭建本地yum仓库的方法

1、配置本地yum源&#xff08;挂载光盘&#xff09; mkdir /medir/cdrom(创建目录) mount /dev/cdrom / medir/cdrom (挂载到/ medir/cdrom目录&#xff09; 2、修改yum配置文件 3. 修改挂载路径/ medir/cdrom&#xff0c; 将gpgcheck1改为0 enabled0改为1. 4. yum list …

谷歌划词翻译

谷歌划词翻译是个谷歌插件 复制及时翻译很好用 插件下载地址 配置谷歌翻译方法

[tp5] thinkPHP5-渲染模板的方式

From: https://blog.csdn.net/Wake_me_Up123/article/details/76096174 默认情况下&#xff0c;控制器的输出全部采用return的方式&#xff0c;无需进行任何的手动输出&#xff0c;系统会自动完成渲染内容的输出。 在控制器里渲染模板 namespace app\index\controller;use t…

.net 预编译 提示中导入的类型 冲突

之所以会出现你遇到的这个问题&#xff0c;是因为项目引用了自身的Dll文件&#xff0c;系统就把项目本身和项目本身生成的DLl文件看成两个项目来对待&#xff0c;因为它们两个本身就是对等的&#xff0c;就会出现冲突的问题。解决办法很简单&#xff0c;就是去掉项目对自身的引…

如何对Javascript代码进行二次压缩(混淆)

如何对Javascript代码进行二次压缩&#xff08;混淆&#xff09; 对Javascript代码进行压缩&#xff08;混淆&#xff09;&#xff0c;可以有效减少传输和加载时间。但是&#xff0c;不是所有的变量&#xff08;方法&#xff09;都能被混淆的&#xff0c;一般来说&#xff0c;只…

vue项目添加百度统计

vue项目添加百度统计

如何在网页标题栏title加入logo(icon)图标?

From: https://www.cnblogs.com/lyp123/articles/5661661.html 打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标&#xff0c;当网页被添加到收藏夹或者书签中时也会出现网页的图标&#xff0c;怎么在网页title左边显示网页的logo图标呢&#xff1f; 方法一&#xf…

教你如何在linux 下批量卸载

教你如何在linux 下批量卸载 最 近本来想在linux 下配置 JDK 6.0 用来开发java&#xff0c;然后遇到很多麻烦&#xff0c;一开始的时候屁颠屁颠的到SUN的网站去下载个 JRE 的bin 文件&#xff0c;这个文件比较小&#xff0c;几十MB而已&#xff0c;安装的时候它自动安装在 /usr…

Unity AssetBundles and Resources指引 (三) AssetBundle基础

本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and-resources?playlist30089 A guide to AssetBundles and Resources 第三部分 AssetBundle基础 3.1概览 AssetBundles系统提供一种手段把一个或多个Asse…

vue项目启动成功浏览器不显示

场景&#xff1a;vue项目启动成功&#xff0c;无任何报错&#xff0c;但是浏览器却一直加载&#xff0c;页面始终是空白。 如果你的项目用到了element-ui的标签页组件el-tabs组件&#xff0c;那么大概率是此组件引起的浏览器卡死问题。 可以现将el-tabs的代码注释掉&#xff0c…

几种常用的清除浮动方法(一)

From: https://www.cnblogs.com/nxl0908/p/7245460.html 1、父级div定义伪类&#xff1a;after和zoom <style type"text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px…

vi and vim 用法

a 在当前光标后面插入字符 i 在当前光标前面插入字符 I 在当前行首插入字符 A 在当前行尾插入字符 o(字母)在当前光标下一行插入字符 O(字母)在当前光标上一行插入字符 b移动光标到当前字符串的第一个字符 B移动光标到当前行的第一个字符(以空格分隔) cc 删除光标所在行并编辑 …

CentOS 7 yum 安装php5.6

配置yum源 追加CentOS 6.5的epel及remi源。 # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm # rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm以下是CentOS 7.0的源。 # yum install epel-release # rp…

h5下载静态文件

1.需要将文件放src的下面的static的文件夹内 2.如果下载的是浏览器不能识别的&#xff08;例如&#xff1a;.exe,.zip,.doc等&#xff09;内容&#xff0c;浏览器会直接进行下载&#xff0c;但是如果下载的是浏览器可以识别的&#xff08;例如&#xff1a;.png,.jpg等&#xff…

浮动的清除 -- 四种方法

From: https://www.cnblogs.com/gchlcc/p/5824200.html 前言 -- 一个父亲不能被自己浮动的儿子&#xff0c;撑出高度。 开胃小菜 来看一个实验&#xff1a;现在有两个div&#xff0c;div身上没有任何属性。每个div中都有li&#xff0c;这些li都是浮动的。我们本以为这些li&a…

vue引入本地图片不显示;vue引入本地图片;

data () {return {imgUrl: require(/static/平安团意险.jpg), // 动态引入图片}},

目录索引

〇、接口、泛型、委托、事件 1.泛型和协变逆变2.委托和事件3.c#基础4.c#4.0协变逆变的理解一、linq等数据处理 1.数据查询2.数组3.linq 总结二、并行程序 1.并行性能简单分析三、编码技巧 1.考虑用类型代替参数检查2.c#没有指针导致的性能问题研究一二3.匿名函数递归4.代码设计…