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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
javascript object array方法使用详解
Dec 03 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP入门学习笔记之一
2010/10/12 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php里array_work用法实例分析
2015/07/13 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
js数据类型检测总结
2018/08/05 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python Requests 基础入门
2016/04/07 Python
python入门教程之识别验证码
2017/03/04 Python
Python 12306抢火车票脚本
2018/02/07 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python列表list操作相关知识小结
2020/01/29 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
求职自荐信
2013/12/14 职场文书
办公室人员先进事迹
2014/01/27 职场文书
教师产假请假条
2014/04/10 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android