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程序设计有所帮助。

时间： 2024-10-09 02:27:30

jquery中cookie用法实例详解(获取,存储,删除等)的相关文章

C#中string用法实例详解

在进行C#程序设计时,用的最多的莫过于string了,但有些时候由于不仔细或者基础的不牢固等因素容易出错,今天本文就来较为详细的总结一下C#中string的用法.具体如下: 1.string是一个引用类型,平时我们比较string对象,比较的是对象的值而不是对象本身 如下面代码所示: string strA="abcde"; string strB="abc"; string strC="de"; Console.WriteLine(strA =

PHP中__get()和__set()的用法实例详解

PHP中__get()和__set()的用法实例详解 在PHP5中,预定义了两个函数“__get()”和“__set()”来获取和赋值其属性,对每个字段进行set和get的操作.只需要加上两个魔术方法即可 php面向对象_get(),_set()的用法 一般来说,总是把类的属性定义为private,这更符合 现实的逻辑.但是,对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数“__get()”和“__set()”来获取和赋值其属 性.类似于java中的javabean的操作,

C#泛型Dictionary的用法实例详解

本文以实例形式讲述了C#中的泛型Dictionary的用法.具有很好的实用价值.分享给大家供大家参考.具体如下: 泛型最常见的用途是泛型集合,命名空间System.Collections.Generic 中包含了一些基于泛型的集合类,使用泛型集合类可以提供更高的类型安全性,还有更高的性能,避免了非泛型集合的重复的装箱和拆箱. 很多非泛型集合类都有对应的泛型集合类,下面是常用的非泛型集合类以及对应的泛型集合类: 非泛型集合类 泛型集合类 ArrayList List<T> HashTable D

C#的FileSystemWatcher用法实例详解

本文实例详述了C#的FileSystemWatcher用法.分享给大家供大家参考.具体用法如下: FileSystemWatcher控件主要功能: 监控指定文件或目录的文件的创建.删除.改动.重命名等活动.可以动态地定义需要监控的文件类型及文件属性改动的类型. 1.常用的几个基本属性: (1) Path :设置要监视的目录的路径. (2) IncludeSubdirectories :设置是否级联监视指定路径中的子目录. (3) Filter :设置筛选字符串,用于确定在目录中监视哪些类型的文件

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

java网页爬虫简单实例详解——获取天气预报。

[本文介绍] 爬取别人网页上的内容,听上似乎很有趣的样子,只要几步,就可以获取到力所不能及的东西,例如呢?例如天气预报,总不能自己拿着仪器去测吧!当然,要获取天气预报还是用webService好.这里只是举个例子.话不多说了,上看看效果吧. [效果] 我们随便找个天气预报的网站来试试:http://www.weather.com.cn/html/weather/101280101.shtml 从图中可用看出,今天(6日)的天气.我们就以这个为例,获取今天的天气吧! 最终后台打印出: 今天:6日

C#中Serializable序列化实例详解

本文实例讲述了C#中Serializable序列化.分享给大家供大家参考.具体分析如下: 概述: 序列化就是是将对象转换为容易传输的格式的过程,一般情况下转化打流文件,放入内存或者IO文件 中.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象,或者和其它应用程序共享使用.反之,反序列化根据流重新构造对象. 一.几种序列化技术 1)二进制序列化保持类型保真度,这对于在应用程序的不同调用之间保留对象的状态很有用.例如,通过将对象序列化到剪贴板,可在

jquery中的ajax方法详解

定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性.最简单的情况下,$.ajax() 可以不带任何参数直接使用.注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. 语法 jQuery.ajax([settings])