【你也能从零基础学会网站开发】Web建站之javascript入门篇认识JavaScript中的Cookie

极客小俊

于 2024-03-14 15:12:27 发布

阅读量1.3k

点赞数 48

分类专栏：编程教程文章标签： JavaScript Cookie 前端开发脚本语言 Cookie生命周期小甜饼免费教程

本文链接：https://blog.csdn.net/windowsxp2018/article/details/136705167

版权

编程教程专栏收录该内容

30 篇文章 1 订阅

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

什么是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都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理