🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
  最近看着人事系统的代码,还真是头疼。。为了尽快上手,看懂点东西,便快马加鞭了。看到前台用到了cookie,正好JS也学到了这个地方,这样就介绍一下Cookie的应用。 ## 一、Cookie是什么   Cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器。   比如说,当你第一次访问淘宝时,要输入你的用户名和密码,这时用户信息会存储在你的浏览器的文本文件中,当你退出后内容就会存在硬盘中,下一次发生会话时,就读入到RAM中。 ## 二、Cookie干什么   随着web越来越复杂,开发者急切的需要能够本地化存储的脚本功能。Cookie的意图就是在本地的客户端的磁盘上以很小的文件形式保存数据。 ## 三、Cookie局限性  (1)每个特定的域名下最多产生10个cookie。  (2)cookie的最大大约是4096字节(4k),为了更好的兼容性,一般不能超过4095字节。  (3)cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie中的。这里是考虑安全性的问题。 ## 四、Cookie如何工作 ![](https://box.kancloud.cn/2016-08-19_57b6bd2914f9a.jpg) ![](https://box.kancloud.cn/2016-08-19_57b6bd29571ba.jpg)  (1)客户端通过浏览器发送报文给服务器,请求连接。  (2)服务器端收到要求,根据客户端的要求建立一个Set-Cookies Header。  (3)服务器端通过建立Response Header去返回给客户端。  (4)客户端收到报文,解析,获取cookie,存在本机内存。   Cookie有几个重要的属性,Cookie中有一个Expires(有效期)属性,这个属性决定了Cookie的保存时间,也可以重新设定来改变它,若不设置该属性,那么Cookie只在浏览网页期间有效,关闭浏览器后,这些Cookie会自动消失。还有path属性,可以限制访问Cookie的目录,domain用来限制域名访问,secure指定必须通过Https加密通信访问。对服务器起作用的是name和value属性。 ## 五、创建,读取,删除Cookie   下面的例子中,分别写了四个函数创建,读取,删除,检测cookie的值。 ~~~ <script lang="javasctript" type="text/javascript"> function getCookie(c_name) { //读取cookie值 if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "=") if (c_start != -1) { c_start = c_start + c_name.length + 1 c_end = document.cookie.indexOf(";", c_start) if (c_end == -1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start, c_end)) } } return "" } function setCookie(c_name, value, expiredays) {//设置cookie值 var exdate = new Date() exdate.setDate(exdate.getDate() + expiredays) document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) } function delCookie(name)//删除cookie { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); } function checkCookie() { //检测cookie值 username = getCookie('username') if (username != null && username != "") { alert('Welcome again ' + username + '!') } else { username = prompt('Please enter your name:', "") if (username != null && username != "") { setCookie('username', username, 365) } } } setCookie("zhouzhou", 2, 3); checkCookie('zhouzhou'); delCookie('zhouzhou'); alert(getCookie('zhouzhou')); </script> ~~~ ## 六、小结   本文简单的从几个角度介绍了:定义,作用,缺点,使用,流程。这让我联想到,Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。什么时候使用Cookie,什么时候使用Session,还是需要仔细研究的。