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 $.each的用法说明
Mar 22 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
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
无线电的诞生过程
2021/03/01 无线电
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
详解JS数值Number类型
2018/02/07 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
12步教你理解Python装饰器
2016/02/25 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python获取引用对象的个数方式
2019/12/20 Python
Python中的Cookie模块如何使用
2020/06/04 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
毕业生医学检验求职信
2013/10/16 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
龙门石窟导游词
2015/02/02 职场文书
春秋淹城导游词
2015/02/11 职场文书
2019公司管理制度
2019/04/19 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
vue修饰符.capture和.self的区别
2022/04/22 Vue.js