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 相关文章推荐
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
超级简单的发送邮件程序
2006/10/09 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
20招让你的Python飞起来!
2016/09/27 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
详解Python流程控制语句
2020/10/28 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Django自带的用户验证系统实现
2020/12/18 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
python 如何用terminal输入参数
2021/05/25 Python