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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
微信小程序实现点击图片放大预览
Oct 21 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
3.从实例开始
2006/10/09 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Python continue语句用法实例
2014/03/11 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python函数参数操作详解
2018/08/03 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python读取xlsx的方法
2018/12/25 Python
Python中new方法的详解
2019/01/15 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
投标服务承诺书
2014/05/28 职场文书
民用住房租房协议书
2014/10/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python