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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
javascript new后的constructor属性
Aug 05 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
基于Vue实现微前端的示例代码
Apr 24 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获取网页内容方法总结
2008/12/04 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
js实现随机点名小功能
2017/08/17 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python中dir函数用法分析
2015/04/17 Python
快速了解python leveldb
2018/01/18 Python
python 日期操作类代码
2018/05/05 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python自动登录QQ的实现示例
2020/08/28 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
市场营销求职信范文
2014/02/21 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server