Javascript 对cookie操作详解及实例


Posted in Javascript onDecember 29, 2016

js 操作 cookie 的方法

cookie

cookie,有时候也用其复数形式Cookies,指某些网站为了辨别用户身份,进行session跟踪而储存在用户本地终端上的数据(经常通过加密)。定义于RFC2109和2965都已废弃,最新取代的规范是RFC6265。

cookie的作用

服务器可以利用Cookie包含信息的任意性来筛选经常性维护这些信息,以判断在HTTP传输中的状态。Cookie最典型的英语是判断注册用户是否已经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化登录步骤,浙西都是Cookie的功能。另一个重要张合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookie,以便在最后付款时提取信息。

js设置cookie

document.cookie="key=value";
//例
document.cookie="name=weiqi";

//可以在控制台中打印出cookie
console.log(document.cookie);

如何修改和获取cookie

js中并没有提供获取cookie的方法,所以只能自己封装方法,相同的key的cookie只能存在一个,如果定义了一个document.cookie="age=21",后面又定义了document.cookie="age=30",那么后面定义的cookie会覆盖前面定义的cookie,所以修改cookie值的时候只用重新定义个key相同的cookie就可以了。那么获取cookie的时候也只用在cookie中获取到这个key后面的“=”和“;”直接的字符串,那就是这个cookie的值了,获取的方法又很多种,这里我写一种比较简单的:

function getCookie(key){
  var index = document.cookie.indexOf(key);
  var returnValue;
  if(index!==-1){
    var tIndex = document.cookie.indexOf(";",index);
    var target = document.cookie.substring(index,tIndex);
    var returnValue = decodeURIComponent(target.replace(key+"=",""))
  }
  return returnValue;
}

document.cookie="name=weiqi";
getCookie("name"); //weiqi

删除cookie

cookie是有有效期的,前面我们设置cookie的时候都没有设置有效期,如果我们将cookie的有效期设置成一个已经过去的时间,那么它就无效了,下面来实现一下:

function delCookie(key){
  var d = new Date();
  document.cookie=key+"=;expires="+ d.toGMTString();
}

document.cookie="name=weiqi";
delCookie("name"); //undefined

给cookie设置一个有效期

通过expires给cookie设置一个有效期,现在我们设置一个cookie的有效期是10天,如下:

var d = new Date();
var time = 10;
d.setTime(d.getTime()+time*1000*60*60*24);
document.cookie="name=weiqi;expires="+ d.toGMTString();

封装cookie

将自定义的一些方法完善一下封装成一个对象,这样在使用的时候就可以直接拿来用了:

//封装cookie方法的对象
var cookie = {
  setCookie:function(key,value,time){
    if(key == undefined){
      return;
    }
    if(time!== undefined){
      var d = new Date();
      d.setTime(d.getTime()+time*1000*60*60*24);
      document.cookie=key+"="+value+";expires="+ d.toGMTString();
    }else{
      document.cookie=key+"="+value;
    }
  },
  getCookie:function(key){
    var index = document.cookie.indexOf(key);
    var returnValue;
    if(index!==-1){
      var tIndex = document.cookie.indexOf(";",index);
      var target = document.cookie.substring(index,tIndex);
      var returnValue = decodeURIComponent(target.replace(key+"=",""))
     }
    return returnValue;
  },
  delCookie:function(key){
    var d = new Date();
    document.cookie=key+"=;expires="+ d.toGMTString();
  }
}


//测试
cookie.setCookie("home")
cookie.setCookie("name","卫旗");
cookie.setCookie("age",22);
cookie.setCookie("sex","男")
cookie.getCookie("sex")
cookie.delCookie("age")

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
javascript显示系统当前时间代码
Dec 29 #Javascript
解析JavaScript模仿块级作用域
Dec 29 #Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 #Javascript
vue实现列表的添加点击
Dec 29 #Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 #Javascript
基于javascript的Form表单验证
Dec 29 #Javascript
You might like
PHP的autoload机制的实现解析
2012/09/15 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
js Math 对象的方法
2013/09/01 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
送你43道JS面试题(收藏)
2019/06/17 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python实现飞机大战游戏
2020/10/26 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python 6种方法实现单例模式
2020/12/15 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
三年级班级文化建设方案
2014/05/04 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
房屋产权证明书
2014/10/15 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
详解Laravel服务容器的优势
2021/05/29 PHP
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
python实现学员管理系统(面向对象版)
2022/06/05 Python