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 相关文章推荐
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
JQuery实现图片轮播效果
May 08 jQuery
Vue实现购物车场景下的应用
Nov 27 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
微信上传视频文件提示(推荐)
Nov 22 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
打造计数器DIY三步曲(下)
2006/10/09 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
浅谈js闭包理解
2019/04/01 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python备份文件的脚本
2008/08/11 Python
Python内置函数dir详解
2015/04/14 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python Series从0开始索引的方法
2018/11/06 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
解决python线程卡死的问题
2019/02/18 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Python Http请求json解析库用法解析
2020/11/28 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
远程教育心得体会
2014/01/03 职场文书
超市客服工作职责
2014/06/11 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技
Mysql如何查看是否使用到索引
2022/12/24 MySQL