为了账号安全,请及时绑定邮箱和手机立即绑定

关于Cookie的原理、作用,区别以及使用

标签:
JavaScript

1、cookie的作用:

我们在浏览器中,经常涉及到数据的交换,比如你登录邮箱,登录一个页面。我们经常会在此时设置30天内记住我,或者自动登录选项。那么它们是怎么记录信息的呢,答案就是今天的主角cookie了,Cookie是由HTTP服务器设置的,保存在浏览器中,但HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。就像我们去超市买东西,没有积分卡的情况下,我们买完东西之后,超市没有我们的任何消费信息,但我们办了积分卡之后,超市就有了我们的消费信息。cookie就像是积分卡,可以保存积分,商品就是我们的信息,超市的系统就像服务器后台,http协议就是交易的过程。


2、机制的区别:

session机制采用的是在服务器端保持状态的方案,而cookie机制则是在客户端保持状态的方案,cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。说到这里,讲下HTTP协议,前面提到,HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。此时,服务器无法从链接上跟踪会话。cookie可以跟踪会话,弥补HTTP无状态协议的不足。


3、cookie的分类:

cookie分为会话cookie和持久cookie,会话cookie是指在不设定它的生命周期expires时的状态,前面说了,浏览器的开启到关闭就是一次会话,当关闭浏览器时,会话cookie就会跟随浏览器而销毁。当关闭一个页面时,不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时,单一的买卖过程,离开之后,信息则销毁。

持久cookie则是设定了它的生命周期expires,此时,cookie像商品一样,有个保质期,关闭浏览器之后,它不会销毁,直到设定的过期时间。对于持久cookie,可以在同一个浏览器中传递数据,比如,你在打开一个淘宝页面登陆后,你在点开一个商品页面,依然是登录状态,即便你关闭了浏览器,再次开启浏览器,依然会是登录状态。这就是因为cookie自动将数据传送到服务器端,在反馈回来的结果。持久cookie就像是我们办理了一张积分卡,即便离开,信息一直保留,直到时间到期,信息销毁。


4、简单的使用cookie的代码

cookie的几种常见属性:document.cookie="key=value;expires=失效时间;path=路径;domain=域名;secure;(secure表安全级别),

cookie以字符串的形式保存在浏览器中。下面贴段代码出来,是一个类似购物网站的将商品添加到购物车,再从购物车还原商品信息的过程,是自己用原生JS封装的函数。

封装的cookie的存入,读取以及删除的函数:(这里是将信息以对象的形式存放到cookie中的,会用到JSON的知识)


  1. // key : cookie 名  

  2. // value : cookie 值  

  3. // options : 可选配置参数  

  4. //      options = {  

  5. //          expires : 7|new Date(), // 失效时间  

  6. //          path : "/", // 路径  

  7. //          domain : "", // 域名  

  8. //          secure : true // 安全连接  

  9. //      }  

  10. function cookie(key, value, options) {  

  11.     /* read 读取 */  

  12.     // 如果没有传递 value ,则表示根据 key 读取 cookie 值  

  13.     if (typeof value === "undefined") { // 读取  

  14.         // 获取当前域下所有的 cookie,保存到 cookies 数组中  

  15.         var cookies = document.cookie.split("; ");  

  16.         // 遍历 cookies 数组中的每个元素  

  17.         for (var i = 0, len = cookies.length; i < len; i++) {  

  18.             // cookies[i] : 当前遍历到的元素,代表的是 "key=value" 意思的字符串,  

  19.             // 将字符串以 = 号分割返回的数组中第一个元素表示 key,  

  20.             // 第二个元素表示 value  

  21.             var cookie = cookies[i].split("=");  

  22.             // 判断是否是要查找的 key,对查找的 key 、value 都要做解码操作  

  23.             if (decodeURIComponent(cookie[0]) === key) {  

  24.                 return decodeURIComponent(cookie[1]);  

  25.             }  

  26.         }  

  27.         // 没有查找到指定的 key 对应的 value 值,则返回 null  

  28.         return null;  

  29.     }  

  30.   

  31.     /* 存入 设置 */  

  32.     // 设置 options 默认为空对象  

  33.     options = options || {};  

  34.     // key = value,对象 key,value 编码  

  35.     var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);  

  36.     // 失效时间  

  37.     if ((typeof options.expires) !== "undefined") { // 有配置失效时间  

  38.         if (typeof options.expires === "number") { // 失效时间为数字  

  39.             var days = options.expires,   

  40.                 t = options.expires = new Date();  

  41.             t.setDate(t.getDate() + days);  

  42.         }   

  43.         cookie += ";expires=" + options.expires.toUTCString();  

  44.     }  

  45.     // 路径  

  46.     if (typeof options.path !== "undefined")  

  47.         cookie += ";path=" + options.path;  

  48.     // 域名  

  49.     if (typeof options.domain !== "undefined")  

  50.         cookie += ";domain=" + options.domain;  

  51.     // 安全连接  

  52.     if (options.secure)  

  53.         cookie += ";secure";  

  54.   

  55.     // 保存  

  56.     document.cookie = cookie;  

  57. }  

  58.   

  59. // 从所有的 cookie 中删除指定的 cookie  

  60. function removeCookie(key, options) {  

  61.     options = options || {};  

  62.     options.expires = -1; // 将失效时间设置为 1 天前  

  63.     cookie(key, "", options);  

  64. }  


下面是商品详情页的JS代码

  1. // 找到所有的 “添加到购物车” 超级链接  

  2.             var links = $("a", $("#tab"));  

  3.             // 循环,为每个 “添加到购物车” 的超级链接添加点击事件  

  4.             for (var i = 0, len = links.length; i < len; i++) {  

  5.                 links[i].onclick = function(){  

  6.                     // 获取当前超级链接所在行的所有单元格  

  7.                     var _cells = this.parentNode.parentNode.cells;  

  8.                     // 获取到即将添加到购物车中的商品信息  

  9.                     var _id = _cells[0].innerHTML,  

  10.                         _name = _cells[1].innerHTML,  

  11.                         _price = _cells[2].innerHTML;  

  12.                     // 将商品信息包装到一个对象中  

  13.                     var product = {  

  14.                         id : _id,  

  15.                         name : _name,  

  16.                         price : _price,  

  17.                         amount : 1  

  18.                     };  

  19.   

  20.                     /* 将当前选购的商品对象保存到 cookie 中去 */  

  21.                     // 从 cookie 中读取已有的保存购物车的数组结构  

  22.                     var _products = cookie("products");  

  23.                     if (_products === null) // cookie 中不存在 products 名的 cookie  

  24.                         _products = [];  

  25.                     else // 存在,则解析 cookie 读取到的字符串为 数组 结构  

  26.                         _products = JSON.parse(_products);  

  27.   

  28.                     // 将当前选购的商品追加到数组中保存  

  29.                     _products.push(product);  

  30.                     // 继续将 _products 数组内容存回 cookie  

  31.                     cookie("products", JSON.stringify(_products), {expires:7});  

  32.                 }  

  33.             }  

html代码,css代码大家可以自己写


  1. <table id="tab">  

  2.         <tr>  

  3.             <td>序号</td>  

  4.             <td>名称</td>  

  5.             <td>价格</td>  

  6.             <td>操作</td>  

  7.         </tr>  

  8.         <tr>  

  9.             <td>1</td>  

  10.             <td>空调</td>  

  11.             <td>3999</td>  

  12.             <td><a href="javascript:void(0);">添加到购物车</a></td>  

  13.         </tr>  

  14.         <tr>  

  15.             <td>2</td>  

  16.             <td>风扇</td>  

  17.             <td>288</td>  

  18.             <td><a href="javascript:void(0);">添加到购物车</a></td>  

  19.         </tr>  

  20.     </table>  

  21.     <a href="cart_购物车.html" target="_blank">查看购物车</a>  


购物车还原商品信息:

  1. // 从 cookie 中读取购物车已有的商品信息  

  2.             var _products = cookie("products");  

  3.             // 判断购物车是否有商品  

  4.             if (_products === null || (_products = JSON.parse(_products)).length === 0)  

  5.                 return;  

  6.   

  7.             // 如果有商品,则显示到页面中  

  8.             $(".result")[0].innerHTML = "";  

  9.             for (var i = 0, len = _products.length; i < len; i++) {  

  10.                 // 当前遍历到的商品对象  

  11.                 var prod = _products[i];  

  12.                 // 克隆 .row 的节点  

  13.                 var _row = $(".row")[0].cloneNode(true);  

  14.                 // 将当前商品对象的信息替换节点中对应的部分,用class名获取到的节点返回类型是一个数组所以要在后面加上[0]  

  15.                 $(".index", _row)[0].innerHTML = prod.id; // 编号  

  16.                 $(".name", _row)[0].innerHTML = prod.name; // 名称  

  17.                 $(".price", _row)[0].innerHTML = prod.price; // 价格  

  18.                 $(".amount", _row)[0].innerHTML = prod.amount; // 数量  

  19.                 $(".oper", _row)[0].innerHTML = "<a href='javascript:void(0);'>删除</a>"  

  20.   

  21.                 // 将克隆的节点副本追加到 .result 的 div 中  

  22.                 $(".result")[0].appendChild(_row);  

  23.             };  

  24.   

  25.             // 为每个 “删除” 的超级链接绑定点击事件  

  26.             var links = $("a", $("#container"));  

  27.             for (var i = 0, len = links.length; i < len; i++) {  

  28.                 // links[i].index = i; // 为当前遍历到的超级链接附加数据  

  29.                 links[i].product = _products[i]; //   

  30.                 links[i].onclick = function(){  

  31.                     // alert("你点击的是第" + (this.index + 1) + "个连接");  

  32.                     var index = inArray(this.product, _products);  

  33.                       

  34.                     if (index !== -1) {  

  35.                         _products.splice(index, 1);  

  36.                     }  

  37.                     // 更新 cookie  

  38.                     cookie("products", JSON.stringify(_products), {expires:7});  

  39.   

  40.                     // 找出页面中待删除的行  

  41.                     var _row = this.parentNode.parentNode;  

  42.                     _row.parentNode.removeChild(_row);  

  43.                 };  

  44.             }  

这里的$(' ')函数是自己封装的函数,用于获取到DOM节点,可以看下我关于getElementsByClassName的兼容那篇文章。


购物车的html代码

  1. <div id="container">  

  2.         <div class="row">  

  3.             <div class="index">商品编号</div>  

  4.             <div class="name">商品名称</div>  

  5.             <div class="price">价格</div>  

  6.             <div class="amount">数量</div>  

  7.             <div class="oper">操作</div>  

  8.         </div>  

  9.         <div class="result" style="clear:both;">  

  10.             购物车为空  

  11.         </div>  

  12.     </div>  

原文出处

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消