JavaScript之cookie技术详解


Posted in Javascript onNovember 18, 2016

运用JS设置cookie、读取cookie、删除cookie
JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。

而cookie是运行在客户端的,所以可以用JS来设置cookie.

假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读取cookie呢?
首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量username的值(“jack”)到cookie中,key值为name,则相应的JS代码为:
document.cookie="name="+username; 

JS读取cookie:
假设cookie中存储的内容为:name=jack;password=123

则在B页面中获取变量username的值的JS代码如下:

var username=document.cookie.split(";")[0].split("=")[1]; 

//JS操作cookies方法!

//写cookies

function setCookie(name,value) 
{ 
  var Days = 30; 
  var exp = new Date(); 
  exp.setTime(exp.getTime() + Days*24*60*60*1000); 
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
}

//读取cookies 
function getCookie(name) 
{ 
  var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

  if(arr=document.cookie.match(reg))

    return unescape(arr[2]); 
  else 
    return null; 
}

//删除cookies 
function delCookie(name) 
{ 
  var exp = new Date(); 
  exp.setTime(exp.getTime() - 1); 
  var cval=getCookie(name); 
  if(cval!=null) 
    document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 
//使用示例 
setCookie("name","hayden"); 
alert(getCookie("name"));

//如果需要设定自定义过期时间 
//那么把上面的setCookie 函数换成下面两个函数就ok;


//程序代码 
function setCookie(name,value,time)
{ 
  var strsec = getsec(time); 
  var exp = new Date(); 
  exp.setTime(exp.getTime() + strsec*1); 
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getsec(str)
{ 
  alert(str); 
  var str1=str.substring(1,str.length)*1; 
  var str2=str.substring(0,1); 
  if (str2=="s")
  { 
    return str1*1000; 
  }
  else if (str2=="h")
  { 
    return str1*60*60*1000; 
  }
  else if (str2=="d")
  { 
    return str1*24*60*60*1000; 
  } 
}
//这是有设定过期时间的使用示例: 
//s20是代表20秒 
//h是指小时,如12小时则是:h12 
//d是天数,30天则:d30

setCookie(“name”,”hayden”,”s20”);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 #Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 #Javascript
js实时获取窗口大小变化的实例代码
Nov 18 #Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 #Javascript
整理一下常见的IE错误
Nov 18 #Javascript
require、backbone等重构手机图片查看器
Nov 17 #Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python实现文本界面网络聊天室
2018/12/12 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python根据服务获取端口号的方法
2019/09/25 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python 实现多线程下载视频的代码
2019/11/15 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
初三化学教学反思
2014/01/23 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
大学生安全责任书
2014/07/25 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书