浅谈JavaScript中的cookie
什么是cookie?简单来说,cookie就是网站服务器存放在我们计算机上的一小段(一般大小不超过4KB)用来识别和记录用户的个人信息的文本。HTTP协议是一种没有“状态”的传输协议,也就是说,服务器无法识别任意两次访问是否有同一个来源,这样就不能判断用户信息,从而也就不能针对特定用户做出个性化设置。为了解决这个问题,cookie技术应运而生。
cookie具体是怎么运行的呢?举个栗子,当我们在网页上登录了一次邮箱后,下一次再登录,会发现我们的用户名(可能还有密码)已经出现在输入框中,不用再次手动输入了,这其中就是cookie在起作用。当第一次登录网站时,网站的服务器端可执行程序(php、asp等等)或客户端脚本(本文主角:JavaScript)就会把我们的某些操作(比如个性化设置)记录下来,存放在cookie中。当下一次访问到该页面时,浏览器在向服务器发送HTTP请求之前,会先在本地查找这个地址是不是有cookie存在,如果存在,就会在把这个cookie信息加入到请求的Header中。服务器在接收到请求时,会先解析这个cookie,把cookie中的信息解释后融入到将要发送的HTML页面中,然后才把网页文件发给客户端浏览器。
一个完整的cookie包含以下几个字段(每个字段都由一个名值对组成):
document.cookie = "name=value;expires=dateString;domain=www.example.com;path=/pathString/;secure";
- name:顾名思义,就是cookie的名称。
- value:cookie的值,它和name一样都要经过URI编码。
- expires:过期时间,过了expires指定的时间,这个cookie将被删除,如果不指定,那么它在浏览器关闭时就会被删除。
- domain:域,指该cookie在什么域名生效,也就是访问网站时应该把这个cookie发送到哪个地址。
- path:domain下的路径,如果指定了路径,那么该cookie只有在当前路径下才能访问,在domain域的其他路径下不能访问。
- secure:安全标志,声明了secure的cookie只能在SSL连接(就是https://打头的链接)时才会被发送到服务器。
那么在JavaScript中怎么操作cookie呢?JavaScript中读取和设置cookie都通过document.cookie这个属性。下面分别通过代码示例来说明怎么设置、读取以及删除cookie。
一、设置cookie
/*
下面的代码说明如何通过JavaScript设置cookie
*/
function setCookie(name,value,days,path,domain,secure){
//从参数读取要设置的cookie的name和value,并进行URI编码
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
//设置cookie的过期时间,根据外部输入的天数(days)来设置
var exp = new Date();
exp.setTime(exp.getTime() + days*24*60*60*1000);
cookieText += ";expires=" + exp.toGMTString();
//如果参数中path、domain、secure不为空就依次在cookieText中缀上这些字段
if(path){
cookieText += ";path=" + path;
}
if(domain){
cookieText += ";domain=" + domain;
}
if(secure){
cookieText += ";secure";
}
//把页面的cookie设置为cookieText的值
document.cookie = cookieText;
}
二、读取cookie
/*
下面的代码说明如何通过JavaScript读取页面cookie。
*/
function getCookie(str){
//从参数str读入要获取的cookie
var name = encodeURIComponent(str) + "=";
//在document.cookie字符串中读取该cookie的位置
var start = document.cookie.indexOf(name);
//如果没有读到,返回false
if(start == -1){
return false;
}
/*
由于每个cookie字段都是以“;”结尾的(除了最后一个),
所以我们从start位置开始查找“;”第一次出现的位置,这个
位置就是本条cookie的结束位置
*/
var end = document.cookie.indexOf(";",start); if(end == -1){
end = document.cookie.length;
}
/*
start + name.length刚好到达这条cookie中“=”的位置,
因此后面直到end的位置都是value值字符串
*/
var value = decodeURIComponent(document.cookie.substring(start + name.length,end));
return value;
}
三、删除cookie
/*
下面的代码说明如何通过JavaScript删除cookie
删除cookie很简单,当把cookie的过期时间设置为当前时间以前,
它立即被删除。这里用到了前面的setCookie函数
*/
function removeCookie(name,path,domain,secure){
return setCookie(name,"",new Date(0),path,domain,secure);
}
这就是用JavaScript来操作cookie的整个过程。接下来,我们用JavaScript完成一个小小的示例。这个示例将在用户每次打开页面时提示用户上次打开本页面的时间。(注意:请选择Firefox浏览器测试本示例,因为Google chrome浏览器不支持在file:///协议下设置cookie,如果你一定要用chrome浏览器,那必须搭建php+mysql+apache的localhost环境)为了实现这个功能,我们设置一个名为lasttime的cookie。在每次用户将要关闭时,调用window的onbeforeunload事件,先把lasttime这条cookie删除(因为这里记录着上次设置的登录时间),然后再设置当前时间为lasttime的值。当用户下一次打开页面时,我们从document.cookie中读取lasttime的值,再运用DOM方法,把信息显示到屏幕上。下面是具体代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>cookie</title>
</head>
<body>
<script>
window.onload = function(){
//页面加载后,读取名为lasttime的cookie,并输出到屏幕上
if (document.cookie){
var welcome = getCookie("lasttime");
document.write("last time visit: " + welcome);
}
}
window.onbeforeunload = function(){
//页面关闭之前,先删除上次的值,再设置新值
if (document.cookie){
removeCookie("lasttime","",0);
}
var now = new Date();
var v = now.toLocaleString();
setCookie("lasttime",v,30);
}
</script>
</body>
</html>
运行结果如下:
参考文献:
1.高宏等.《JavaScript从入门到精通》.机械工业出版社
2.Nicholas C. Zakas.《JavaScript高级程序设计》(中文第三版).人民邮电出版社
浅谈JavaScript中的cookie的更多相关文章
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
- 浅谈JavaScript中的内存管理
一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...
- 浅谈JavaScript中闭包
引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...
- 浅谈JavaScript中的继承
引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...
- 浅谈JavaScript中继承的实现
谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- 浅谈JavaScript中的defer,async
引言 开始重读<<JavaScript高级程序设计>>一书,看到关于JavaScript中关于defer.async的部分.网上查询了点资料,觉得蛮好的.现在总结下. defe ...
随机推荐
- ARM架构与体系学习(二)——3级流水线
ARM架构与体系学习(二)——3级流水线 标签: 存储嵌入式汇编c 2012-04-18 00:44 5414人阅读 评论(4) 收藏 举报 分类: ARM7(16) 版权声明:本文为博主原创文章 ...
- wpf绑定静态变量,模拟rem单位
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...
- 使用selenium实现模拟淘宝登陆
from selenium import webdriverfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.w ...
- Shell 脚本编程 基本语法:
Shell 脚本编程语法: 注: 文章来源 http://www.cnblogs.com/yunquan/p/6821850.html 视频来源:https://www.bilibili.com/vi ...
- ionic使用cryptojs加密 复制到黏贴版 使用md5
npm install crypto-js npm install --save @types/crypto-js import * as crypto from "crypto-js&qu ...
- zk strom 本地环境启动命令
bin/zkServer.sh statusbin/zkServer.sh startbin/storm nimbus &bin/storm ui &bin/storm drpc &a ...
- 基于Ubuntu系统的Tomcat部署项目
第一步.拿到项目war包 第二步.上传到服务器/var/lib/tomcat8/webapps/ROOT目录下 第三步.使用命令解压war包 jar -xvf star1.0.0.war 第三步.重启 ...
- C/C++ uchar的一个有趣用法
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51377490 图像处理中常常使用的一种 ...
- Q - Period II
For each prefix with length P of a given string S,if S[i]=S[i+P] for i in [0..SIZE(S)-p-1], then the ...
- assign retain 和copy的区别
assign 对基础数据类型 (NSInteger,CGFloat)和C数据类型(int, float, double, char)等 等. 此标记说明设置器直接进⾏行赋值,这也是默认值.在使⽤用垃圾 ...