JS设置cookie、读取cookie、删除cookie


Posted in Javascript onApril 17, 2015

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 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 #Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 #Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 #Javascript
JS获取图片高度宽度的方法分享
Apr 17 #Javascript
JS替换字符串中空格方法
Apr 17 #Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 #Javascript
jQuery实现自定义事件的方法
Apr 17 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python爬虫的工作原理
2017/03/05 Python
Python创建字典的八种方式
2019/02/27 Python
利用python画出AUC曲线的实例
2020/02/28 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
技术人员面试提纲
2013/11/28 职场文书
自我鉴定书面格式
2014/01/13 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
寒假家长评语大全
2014/04/16 职场文书
运动会加油稿20字
2014/11/15 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
用Python写一个简易版弹球游戏
2021/04/13 Python
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Java Socket实现多人聊天系统
2021/07/15 Java/Android
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android