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


Posted in Javascript onJanuary 04, 2016

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

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

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

$.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']

$.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记录用户查询过信息

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

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

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

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

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

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);
}
}

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

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

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

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

<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文件里,引用进来就行了
下拉列表是怎么加载的呢?看下面的一个方法就知道了

加载列表

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类

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

Javascript 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
Vue性能优化的方法
Jul 30 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 #Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 #Javascript
详解AngularJS中的filter过滤器用法
Jan 04 #Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 #Javascript
深入浅析AngularJS中的module(模块)
Jan 04 #Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php后门URL的防范
2013/11/12 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python端口扫描简单程序
2016/11/10 Python
Python可变参数用法实例分析
2017/04/02 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
厂区绿化方案
2014/05/08 职场文书
监督检查工作方案
2014/05/28 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL