【你也能从零基础学会网站开发】Web建站之javascript入门篇 认识JavaScript中的Cookie
🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
什么是Cookie
cookie其实就是一些数据信息,只是它们以文件的方式保存起来,可以读取和修改。
可以利用它与某个网站进行联系,并在浏览器与服务器之间传递信息。
也就是它的最经典的用途是cookie是保存状态,识别身份, 从另一个角度来讲,也可以将它看成一个变量,当然一种确定的变量是有大小之分的,比如说整型类型,cookie也一样,它也是有大小限制的。
每个cookie所存放的数据不会超过4KB,而每个cookie文件则不会多于300个cookie。
cookie的作用和检测用户浏览器是否支持cookie
cookie的主要作用是保存状态,识别身份, 因此在很多情况下都可以使用到cookie,特别是在用户身份验证的时候。
coiokie与浏览器的连系是比较紧密的,不同的浏览器会带来一些意想不到的情况, 你必须确定一个用户在它的浏览器设置中是否关闭了cookies。
我们也可以先来检测一下,我们的浏览器是否支持Cookie
举个栗子
//判断浏览器是否支持cookie
if (navigator.cookieEnabled) {
//提示浏览器支持cookie
document.write("你的浏览器支持cookie功能")
} else {
//提示浏览器不支持cookie
document.write("你的浏览器不支持cookie");
}
创建与读取cookie
在JavaScript中,创建cookie是通过cookie名和值的方式来完成的。
一个网站中cookie一般来说是不唯一的,可以有多个,而且这些不同的cookie还可以拥有不同的值。
举个栗子
例如: 要存放用户名和密码,则可以用两个cookie,一个用于存放用户名,另一个用于存放密码。
然后再使用document对象的cookie属性可以用来设置和读取cookie。
每个cookie都是一个名/值成对出现的,也就是键值对 。
创建并读取cookie
document.cookie = "id=12"; // 创建cookie的名和值
document.cookie = "user=张三"; // 创建cookie的名和值
var strCookie = document.cookie; // 获取该域名下的所有cookie值.
document.write(strCookie); // 显示所有的cookie的名与值
获取cookie的值
在上面谈到了读取cookie的名与值,可以看到,只能够一次获取所有的cookie值,而不能指定cookie名称来获得指定的值,这样就必须从cookie中找到你要那个值,因此处理起来可能有点麻烦,用户必须自己分析这个字符串,所以得用到几个常见的字符处理函数来获取指定的cookie值。
这里我们简单的封装一个函数来获取指定的Cookie
值!
举个栗子
//设置Cookie
document.cookie = "id=823";
document.cookie = "user=张三";
document.cookie = "password=123456";
function returnCookieValue(key){
//获取cookie字符串
var str = document.cookie;
//将多cookie切割为数组
var arr = str.split("; ");
//document.write(arr);
//定义一个空字符串
var userIndex = "";
//定义一个变量并赋值0
var i = 0;
//遍历cookie数组,处理每个cookie对
while (i < arr.length) {
//用“=”将cookie的名与值分开
var arrs = arr[i].split("=");
//找到名称为user的cookie,并返回它的值
//document.write(arrs[0]+'<br>');
//循环判断
if (arrs[0]==key){
//将获取的值保存在变量userIndex中
userIndex = arrs[1];
break;
}
//变量i加1
i++;
}
//判断所要查找的值是否存在
if (userIndex!= "")
//输出userIndex的值
return '当前查找的值为:'+userIndex;
else {
//没有查到要查的值
return '查无此值';
}
}
//根据cookie查找值
var result=returnCookieValue('user');
//输出结果
document.write(result);
如图
cookie的编码
cookie都是使用未编码的格式存入在cookie文件中的。
但是在cookie中是不允许包含空格、分号、逗号等特殊符号的。如果要将这些特殊符号也写入cookie中,那就必须在写入cookie之前,先将cookie用escape编码,再在读取cookie时再通过unescape函数将其还原
cookie的生存期
在默认情况下,cookie是临时存在的。在一个浏览器窗口打开时,可以设置cookie,只要该浏览器窗口没有关闭,cookie就一直有效,而一旦浏览器窗口关闭后,cookie也就随之消失。
如果想要cookie在浏览器窗口之后还能继续使用,就需要为cookie设置一个生存期。
也就是cookie的终止日期,在这个终止日期到达之前,浏览器都可以读取该cookie。
一旦终止日期到达之后,该cookie将会从cookie文件中删除。
我们也可以简单的封装一个函数来实现一下设置Cookie
的生存期!
举个栗子
html代码如下
<title>cookie的生存期</title>
cookie-key名:<input type="text" id="Name"><br>
cookie-val值:<input type="text" id="Value"><br>
<select id="Time" size="1">
<option value="1">一天</option>
<option value="2">二天</option>
<option value="3">三天</option>
<option value="4">四天</option>
<option value="5">五天</option>
<option value="6">六天</option>
<option value="7">七天</option>
<option value="8">八天</option>
</select>
<br>
<br>
<input type="submit" name="Submit" value="设置cookie" onClick="setCookie()">
JS代码如下
//以下三句是获取客户输入的信息:cookie变量的值、名和保存时间
function setCookie() {
//cookie变量的保存时间
n = Time.value;
var key = Name.value; //cookie变量的名
var val = Value.value; //cookie变量的值
if (key != "") {
alert(1);
//获取当前时间
var date = new Date();
//将date设置为n天以后的时间
var expireDays = n * 24 * 3600 * 1000;
date.setTime(date.getTime() + expireDays);
//将两个cookie设置为10天后过期
document.cookie = key + "=;" + escape(val) + "; expire=" + date.toGMTString();
alert("设置成功!时间为:" + expireDays + "秒(" + n + "天)"); //输出信息
} else {
alert("设置失败,cookie变量名不能为空"); //提示用户设置失败
}
}
如图
大家可以去试试看!
cookie的安全性
在默认情况下,cookie都是采用不加密的HTTP的传输方法,这种方法传输容易被别人窃听。
但如果cookie中的信息很重要,就不能用这种方法了。
因此,在JavaScript提供了cookie的secure,可以解决这个问题
Secure就是安全的意思, 当设置了cookie的secure之后,cookie就只能通过HTTP或其他安全协议来传输,这样消息就不容易被别人窃听了。cookie的secure是一个布尔类型的值。
使用cookie的注意事项
cookie是存放在客户端上的文件,可以使用第三方工具来看来cookie的内容。
因此,cookie并不是很安全的,每个cookie存放的数据最多不能超过4KB ,每个cookie文件最多只能存储300个cookie 。
cookie是与浏览器相关的, 也就是说不同浏览器之间所保存的cookie也是不能互相访问的 。
由于每个cookie都是硬盘上的一个文件,因此很有可能被用户无意间删除。
cookie安全性不够高。
所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇