【建站系列教程】3.1、cookie介绍

写在前面：大家好，我是热爱编程的小泽。

【建站系列教程】是我的亲身建站经历写给广大建站同胞们的教学博客。

喜欢的话点个赞吧~ 评论区欢迎交流讨论~

cookie是站长必会的一个知识，它在本地设置、用户会话、用户标识等等方面都有作用。我们先上几个应用场景。

cookie的应用场景

1 小说网站的字体、颜色、背景颜色设置

我们知道，网页每次刷新都会重新显示一次文件。如果你正在某个小说网站阅读小说，页面的背景颜色默认是白色，你把它改成米黄色之后，每次刷新仍然变成白色。这样是不是很苦恼？每次刷新都要设置一下。

所以，客户就提出一个需求：解决每次刷新之后，页面的初始颜色都变成我设置的颜色，而不是默认色。甚至，当我7天之后再打开这个网站，仍然是我设置的颜色。

 cookie能实现。

2 隐藏url里面的参数

 一般情况下，在登录页面登录进入主页后，url是这样：http://localhost/index.php?id=123456&pw=123456 但是这样很不安全啊，参数别人直接可以看到，所以就提出第二种解决方法。  我们把id和pw的值放在一起加密传输，然后在服务器端解密，url是这样：

http://localhost/index.php?infor=awelivbu123457khbv 这样稍微有点用了，但是只要是能解密的明文，别人一定能破解。

所以又提出了一个需求，我想让url里面不显示参数。url这样：http://localhost/index.php 那那些参数如何保存与传递呢？

 cookie能实现。

cookie的通俗介绍

 Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

Cookie 主要用于以下三个方面：

 1、会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）

 2、个性化设置（如用户自定义设置、主题等）

 3、浏览器行为跟踪（如跟踪分析用户行为等）

【注】：

1. cookie保存在用户的浏览器中。服务器端可以设置有效时间，超过时间即失效。
2. cookie在浏览器中的保存，是针对网站级别的。也就是，你在http://localhost/下不管哪个页面设置的cookie，都保存在localhost下。即以站点为单位保存。
3. cookie保存在用户的浏览器中。服务器端可以设置有效时间，超过时间即失效。
4. cookie在浏览器中的保存，是针对网站级别的。也就是，你在http://localhost/下不管哪个页面设置的cookie，都保存在localhost下。即以站点为单位保存。

cookie的基本用法

js版本

基本满足需要

function setCookie(key, value, iDay) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDay);
  document.cookie = key + '=' + value + ';expires=' + oDate;
}
function removeCookie(key) {
  setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
  var cookieArr = document.cookie.split('; ');
  for(var i = 0; i < cookieArr.length; i++) {
    var arr = cookieArr[i].split('=');
    if(arr[0] === key) {
      return arr[1];
    }
  }
  return false;
}

jQuery版本

jQuery也封装了自己的jquery.cookie.min.js文件，需求少的话，建议用以上js版本，代码比较少。

利用cookie解决博客开头的两个应用场景

1 小说网站的字体、颜色、背景颜色设置

 解决逻辑：

1、刚开始，网站没有cookie。刷新后，先检测有无cookie，有cookie，则按照cookie的值去设置页面的css；无cookie，则页面的字体等等都是默认。

2、每次当用户改变字体、颜色等等，都去更新一下cookie。

2 隐藏url里面的参数

 解决逻辑：

把用户id和id与密码的MD5加密存入cookie中，每次用户执行有关数据库的操作时，验证用户的token是否正确。