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图片轮换代码(js图片轮播)
May 06 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
Vue-Router的使用方法
Sep 05 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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来检测proxy
2006/10/09 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
AJAX的使用方法详解
2017/04/29 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Javascript 布尔型分析
2008/12/22 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
简单谈谈Python流程控制语句
2016/12/04 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
会议室标语
2014/06/21 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
python中pandas对多列进行分组统计的实现
2021/06/18 Python