使用cookie实现登录状态的保存及判定

使用cookie实现登录状态的保存及判定

Cookie是指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常经过加密）。

所以通过cookie可以实现对用户登录状态的判定，防止用户不经过登录直接进入一些页面，或者进入一些没有权限的页面。

那么如何对cookie进行操作呢？

对cookie的写操作

在cookie中，除了name和value，每条记录还有很多属性，如失效时间，是否采用安全协议传输等等，大部分属性不常用到，在此不详细介绍，这里有相当详细的介绍。

下面是我实现的，对cookie的name、value和失效时间的写方法：

function setCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); 
}

代码还是很简单的，只需要将传入的值组合成字符串放入cookie中就可以了。

当使用document.cookie对cookie进行操作时，浏览器会自动把传入的name和已经存在cookie中的name进行对比，如果已经存在那么就会覆盖掉，如果不存在就会创建一条新的cookie记录来保存键值。

对cookie的读操作

在对cookie进行读操作时，需要对cookie是否存在，cookie中是否存有这条记录进行判断。

下面是我实现的，根据name来进行cookie的读操作：

function getCookie(c_name)
{
if (document.cookie.length>0)//首先查询cookie是否是空的
  {
  c_start=document.cookie.indexOf(c_name + "=")//检测这个cookie是否存在
  if (c_start!=-1)//如果cookie存在
    { 
    c_start=c_start + c_name.length+1 //获取到cookie的值的开始位置
    c_end=document.cookie.indexOf(";",c_start)//从c_start开始查找";"的存在
    if (c_end==-1) c_end=document.cookie.length//如果没找到，说明是最后一项
    return unescape(document.cookie.substring(c_start,c_end))//把cookie的值拆分出来并且对这个值进行解码，unescape()与escape()相对，对被escape()编码的字符串进行解码
    } 
  }
return ""//不存在就返回空
}

主要是通过字符串操作，找到存储的value的位置。

注意： 在这里，有个坑。。。就是indexOf()，会把检测到的第一个符合条件的字符位置返回，所以如果cookie记录中有一条记录1的name包含另一条记录2的name，并且记录1的位置在记录2的前面，那么查找记录2的时候将会找到记录1。
比如：记录1：”username=123456”，记录2：”name=xiaoming”
那么在获取记录2时将会获取到记录1
所以在命名的时候需要注意，尽量不要和曾经有的记录的name相同。

将cookie用来保存登录状态

那么cookie是如何保存登录状态的呢？

首先，在用户登录成功的时候，在后台会设置cookie值，用来保存用户的username，和identity（身份）

然后，在除了登录界面以外的所有界面，都会判断cookie中是否存在该用户的cookie，如果不存在就返回到登录界面，如果存在那么判断该身份是否具有访问该界面的权限，如果具有权限才可以继续访问，否则跳转到其他具有访问权限的界面。

下面是student.html界面对身份进行判断的代码：

var username;//登录用户的用户名
var identify;//登录用户的身份

//检查是否已登录和登录者的身份
function checkIdentify() {
    username = getCookie("username");
    if(username == null || username == "") {
        alert("please login first!");
        location.assign("login.html");//如果用户还未登录，那么返回登录界面
    } else {
        identify = getCookie("identify");
        if(identify == "teacher") {//如果登录的身份是教师
            alert("teacher can not visit student's page");
            location.assign("teacher.html");
        }
    }
}
//在页面加载之前就要进行登陆者身份判断
checkIdentify();

由于后台还没写好所以先用js来模拟cookie操作.

1. 首先是没有登录时

      setCookie("username", "", -1);
      setCookie("identify", "", -1);

   如果前面设置过cookie值，那么通过这两条语句，将cookie值无效化。

   这时，如果直接访问student.html就会这样：

   

   然后返回到登录界面

2. 然后尝试以teacher身份登录，访问学生界面，通过下面两行语句改变cookie值：

      setCookie("username", "201408010111", 1);
      setCookie("identify", "teacher", 1);
   

   这时，访问student.html就会这样：

   

   然后返回到teacher.html界面

cookie的中文乱码问题：
使用decodeURIComponent()对中文进行处理

return decodeURIComponent(document.cookie.substring(c_start, c_end));

​