20180909 解析JS Cookie的设置,获取和检索
引用: JavaScript Cookie - by runoob.com
Cookie是储存在电脑文本文件中的数据，用于保存访问者的信息，并可以在下次打开页面时引用。
页面在设置/引用访问者信息时，需要在JavaScript中对Cookie进行设置，获取和检索三个函数。
例如当访问者首次访问网页时，网页会对访问者进行检索（访问者数据），无搜索信息时则页面需要访问者进行登录（设置数据），当下次再次登录时页面会自动返回访问者数据。
以下是我个人对使用Cookie保存用户名案例的解读：
1) 检索Cookie
页面在被打开(onload)时调用"检索函数"(checkCookie)，如果Cookie中存在访问者信息则调用"获取函数"(getCookie)并返回用户名，没有则调用"设置函数"(setCookie)对用户名进行设置。
<body onload="checkCookie()"> <!--当页面被打开时调用checkCookie()--> <script>
function checkCookie()
{
var user = getCookie("username"); //调用getCookie()中的username，若不为空则返回值(用户名)
if (user!=""){
alert("welcome back " + user);
}
else {
user = prompt("Please enter your name: ",""); //页面弹出“请输入用户名”窗口，填写user的值
if (user!="" && user!=null){ //当输入的用户名不为空值时，将user作为属性调入setCookie()中
setCookie("username",user,30);
}
}
}
</script> </body>
首次登陆会弹出窗口:
2. 设置Cookie
通过定义函数的参数setCookie(cname,cvalue,exdays)将访问者信息的值保存到"Cookie名称"，"Cookie值"和"Cookie过期时间"中.
在上述检索函数中，让我输入用户名"Akon Wong"后，函数将"username","Akon Wong",30这三个值保存到setCookie(cname,cvalue,exdays)中
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*10000)); //设置时间为当前时间+exdays的毫秒值(在checkCookie中，设置exdays的值为30)
var expires = "expires="+d.toUTCString(); //设置时间为字符串显示 (toGMTString()已作废)
document.cookie = cname+"="+cvalue+";"+expires; //设置cookie的格式，通过checkCookie()后cookie的字符串结果为"username=Akon Wong;'到期日期'"
}
3. 获取Cookie
当下次再打开页面后，页面的checkCookie函数会在getCookie函数中获取到Cookie储存的用户名"Akon Wong"，并返回值。
function getCookie(cname)
{
var name = cname + "="; //定义一个值为"username="的变量
var ca = document.cookie.split(';'); //将cookie的字符串数据转变为以逗号分隔的数组
for (var i=0; i<ca.length; i++){ //通过for函数循环cookie的数据，
var c = ca[i].trim();
if (c.indexOf(name)==0){ return c.substring(name.length,c.length); } //当数据中包含关键字"name"时，返回"username="后面的字符(即用户名)
}
return ""; //若数据中没有找到关键字，则返回空值，进入checkCookie的初始值设置
}
再次登录的欢迎词:
完整函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set Cookies</title>
</head>
<body onload="checkCookie()"> <p id="demo"></p> <script>
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000)); //set up the due day of cookie
var expires = "expires="+d.toUTCString();
document.cookie = cname+"="+cvalue+"; "+expires;
//the type of cookie: cookieName=value; due day
} function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';'); //return 'the "username";username; time'
for (var i=0; i<ca.length; i++){
var c = ca[i].trim();
if (c.indexOf(name)==0){ return c.substring(name.length,c.length); }
}
return "";
} function checkCookie()
{
//run getCookie() to check if the username is exist.
var user = getCookie("username");
if (user!=""){
alert("welcome back " + user);
}
else {
user = prompt("Please enter your name: ","");
//prompt() can return the message that user input
if (user!="" && user!=null){
//run setCookie() to store the messages into cookie.
setCookie("username",user,30);
}
}
}
</script>
</body>
</html>
20180909 解析JS Cookie的设置,获取和检索的更多相关文章
- js中的cookie的设置获取和检查
设置cookiefunction setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays* ...
- [转]javascript js cookie的存储,获取和删除
本文转自:http://www.jb51.net/article/13240.htm 使用方法: //1.存储Cookie //2.参数说明: 1.参数1:Cookie存储Name,参数2:Cooki ...
- springboot项目：登录 登录aop拦截 使用Redis与cookie 进行设置获取清除操作
登录.登出: 第一步:在pom文件中引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...
- js cookie 页面倒计时
疯了啦 写了一篇没有保存需求:页面倒计时 只从第一次加购开始公共方法cookie的设置 获取function getCookie(c_name){ if (document.cookie.length ...
- 【转】分享前端开发中通过js设置/获取cookie的一组方法
在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. js方法的完整代码如下: var cookie = { set:function ...
- JS读写Cookie（设置、读取、删除）
JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...
- JS访问或设置cookie的方法+跨域调用方法
无意中从163网站获取的JS访问或设置cookie的方法,Log到日志上以防遗忘 //COOKIE功能检查function fCheckCookie(){ if(!navigator.cooki ...
- 【JavaScript】JS跨域设置和取Cookie
cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样 ...
- Cookie的属性（cookie的设置、获取和删除）
每个cookie都有四个可选的属性,他们分别控制cookie的生存周期.可见性.安全性等. Cookies最初设计时,是为了CGI编程.但是,我们也可以使用Javascript脚本来操纵cookies ...
随机推荐
- CCF201809(Java)
第一题: 问题描述 在一条街上有n个卖菜的商店,按1至n的顺序排成一排,这些商店都卖一种蔬菜. 第一天,每个商店都自己定了一个价格.店主们希望自己的菜价和其他商店的一致,第二天,每一家商店都会根据他自 ...
- GUI的最终选择 Tkinter(一)：Tkinter最初体验
EasyGui就是一个简单的文字交互界面模块,从今天开始来开始学习Tkinter Tkinter是Python标准的Gui库,它实际是建立在Tk技术上的,Tk最初是为Tcl(一门工具名语言)所涉及的, ...
- (转) Linux命令学习手册-arp命令
arp 原文:http://blog.chinaunix.net/uid-9525959-id-3318814.html [功能] 管理系统的arp缓存. [描述] 用来管理系统的arp缓存,常用的命 ...
- 在Pycharm中写python代码时光标变粗
在练习写python代码时,不小心摁了Insert键,结果光标变粗. 如下图所示: 原因: 和word一样,在编辑文本或代码时,有两种模式:改写和插入模式. 当我们在编辑文章或者是代码时,应该将模式设 ...
- Storm概念学习系列之Storm与Hadoop的角色和组件比较
不多说,直接上干货! Storm与Hadoop的角色和组件比较 Storm 集群和 Hadoop 集群表面上看很类似.但是 Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行 ...
- jquery字符串数组转json字符串 C#json字符串转字符串list
一.jquery字符串数组转json字符串 var str=['1','2','3']; var jsonText= JSON.stringify(str);//把一个对象转换成json字符串 str ...
- 基于php缓存的详解
nginx缓存 nginx有两种缓存机制:fastcgi_cache和proxy_cache 下面我们来说说这两种缓存机制的区别吧 proxy_cache作用是缓存后端服务器的内容,可能是任何内容,包 ...
- Default Bearer, Dedicated Bearer... What exactly is bearer ?
Default Bearer, Dedicated Bearer... What exactly is bearer ? While trying to get a better understa ...
- Java学习笔记--类和对象
1.介绍面向对象的编程 面向对象是现在主流的编程样例,它替代了以前C语言使用时的“结构体”,Java是一门面向对象的语言,所以需要熟悉面向对象的概念.面向对象的程序由很多对象组成,每 ...
- android中开启线程
其实Android启动线程和JAVA一样有两种方式,一种是直接Thread类的start方法,也就是一般写一个自己的类来继承Thread类.另外一种方式其实和这个差不多啊! 那就是Runnable接口 ...