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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
小程序实现tab标签页
Nov 16 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
Zerg建筑一览
2020/03/14 星际争霸
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
js实现右键菜单功能
2016/11/28 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python入门篇之条件、循环
2014/10/17 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python 序列的方法总结
2016/10/18 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
医院办公室主任职责
2013/12/29 职场文书
小学二年级评语
2014/04/21 职场文书
亲子活动总结
2014/04/26 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
学校社团活动总结
2015/05/07 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server