js中cookie详细讲解及使用实例
什么是 Cookie
Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息。
假设在用户请求访问您的网站 http://www.manongjc.com/ 上的某个页面时,您的应用程序发送给该用户的不仅仅是一个页面,还有一个包含日期和时间的 Cookie。用户的浏览器在获得页面的同时还得到了这个 Cookie,并且将它保存在用户硬盘上的某个文件夹中。
以后,如果该用户再次访问您站点上的页面,当该用户输入 URL http://www.manongjc.com/时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在,浏览器就将它与页面请求一起发送到您的站点,您的应用程序就能确定该用户上一次访问站点的日期和时间。您可以根据这些信息向用户发送一条消息,也可以检查过期时间或执行其他有用的功能。
cookie 工作原理
Cookie是在浏览器访问Web服务器的某个资源时,由Web 服务器在HTTP 响应消息头文件中附带传递给浏览器的一些数据。如果浏览器保存了这些数据,当它每次访问该web服务器时,都应在HTTP 请求头文件中将这些数据回传给WEB 服务器。WEB 服务器将这些数据在HTTP 请求头文件中使用Set-Cookie响应头字段将Cookie信息发送给浏览器,浏览器则通过在HTTP 请求消息中增加Cookie请求字段将Cookie回传给web服务器,一个Cookie只能标识一种信息。一个web 服务器可以给浏览器发送多个Cookie ,这样web服务器和浏览器之间可以使用多个Cookie 来传递信息。
Cookie 基础知识
- cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。
- 由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。
- 每个 cookie 的格式都是这样的:<cookie名>=<值>;名称和值都必须是合法的标示符。
- cookie 是存在 有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。
- alert(typeof document.cookie) 结果是 string,曾经我以为是array,还闹过笑话...囧
- cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问(这句话有点绕,一会看个例子就好理解了)。
- 其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。
js中如何操作cookie
1. 创建cookie
function createCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
2. 读取cookie
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
3. 给cookie设置终止日期
例如:如果要将cookie设置为10天后过期,可以这样实现:
//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();
4.删除cookie
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();
}
cookie深入篇
1. js 操作cookie路径问题
这里主要不是讲这个方法,js写cookie这种代码网上一抓一把,在使用的时候遇到一点问题,就是写的cookie 是有路径问题的,在user目录下可以使用跳转到另外一个目录下cookie,经过比较cookie与其他cookie的不同发现,用js写的cookie在当前目录下,不在根目录下,这里可以用这个来控制访问但是不符合现在的需求,在网上的某个地方看到一段代码,可以解决这个问题,在这里贴出来,大家需要用的可以参考。代码如下:
Utils.writeCookie = function (value, name, key) {
var Days = 2;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
if (key == null || key == "") {
document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString()+";path=/";
}
else {
var nameValue = getCookie(name);
if (nameValue == "") {
document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
else {
var keyValue = getCookie(name, key);
if (keyValue != "") {
nameValue = nameValue.replace(key + "=" + keyValue, key + "=" +encodeURI ( value));
document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/";
}
else {
document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
}
}
}
顺带把读取cookie的也一起贴 了,引用了别人的代码并非原创:
Utils.readCookie = function(name,key) {
var nameValue = "";
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) {
nameValue = decodeURI(arr[2]);
}
if (key != null && key != "") {
reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
if (arr = nameValue.match(reg)) {
alert( decodeURI (arr[2])); return decodeURI(arr[2]);
}
else return "";
}
else {
return nameValue;
}
}
2. js中cookie 域
路径能解决在同一个域下访问 cookie 的问题,咱们接着说 cookie 实现同域之间访问的问题。语法如下:
document.cookie = "name=value;path=path;domain=domain"
红色的domain就是设置的 cookie 域的值。
例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com",我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问,我们就需要用到 cookie 的domain属性,并且需要把path属性设置为 "/"。例:
document.cookie = "username=Darren;path=/;domain=qq.com"
注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。
3. 提高COOKIE的安全性
网络上常见方案是:
给Cookies加个加密算法。 给Cookies加个时间戳和IP戳,实际就是让Cookies在同个IP下多少时间内失效。最终使用MD5来MAC签名防止篡改……但这样仍然可以看到明文信息,有一定不安全之处。
我的方案是:
cookie==3des(“值,时间,IP戳”); 最终得到的COOKIE是这样的:3BD1B32614A528EA
使用3DES来加密,这样保证客户端没有明文……。
服务端检查的时候,再解密出来值,时间,IP戳,并检查过期时间与IP……不符的需要清空此COOKIE,转向登录页面..
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【技术创作101训练营】腾讯云主机上部署 FRP+Teamviewer 穿透内网进行远程运维
- 图像处理笔记(7)---- OpenCV 绘制无填充矩形
- 图像处理笔记(8)---- OpenCV 获取追踪对象的HSV值
- (数据科学学习手札95)elyra——jupyter lab平台最强插件集
- Python 序列化/反序列化自定义类型
- Windows10下使用VS2017编译和使用yaml-cpp库
- CentOS7下编译yaml-cpp库
- SAP Spartacus CurrentProductService返回的null对象
- SAP Spartacus产品明细页面用Observable显示产品名称
- 关于rxjs里operators filter和map的详细讨论
- 用代码查看SAP Spartacus购物车内的行项目
- rxjs的map和switchMap在SAP Spartacus中的应用
- 用代码查看SAP Spartacus购物车内的行项目
- rxjs fromEvent的用法
- Python2和Python3的区别简单总结