VisYang's Studio.

cookie 与 session 的关系

cookie session
2016/07/18

因为http协议是无状态的，但是我们有记录状态的需求。
而 cookie 和 session 就可以来解决这个问题。cookie 和 session 都可以记录客户端与服务器之间的通信状态,那么 cookie 和 session 有哪些联系呢？

  • cookie数据存放在客户的浏览器上，session数据放在服务器上
  • cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session
  • session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE
  • 单个cookie保存的数据不能超过4K，而session没有限制
  • 所以：将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中
  • expires 设置cookie的有效期
  • path 设置cookie的路径（在父路径下设置的cookie，子路径可以获取到，反之不可以）
  • cookie的设置是累加操作不是覆盖操作

  • cookie的分类：
    会话cookie：存储在内存中，浏览器关闭后就消失了
    持久cookie：存储在浏览器指定的文件中，会有一个有效期

  • cookie的基本操作：设置cookie；获取cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //设置cookie
      var date = new Date();
      date.setDate(date.getDate() + 3);
      console.log(date);
      console.log(date.toGMTString());
      //设置有效期必须使用toGMTString
      document.cookie = 'age=12; expires=' + date.toGMTString() + '; path=/'
      //获取cookie
      uname=lisi; age=12
      console.log(document.cookie);

  • 封装获取 cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 封装方法获取指定cookie
     function getCookie(key){
       var all = document.cookie;
       var result = null;
       if(all){
         var kvs = all.split('; ');
         kvs.forEach(function(item){
           var kv = item.split('=');
           if(key == kv[0]){
             // 找到对应的cookie
             result = kv[1];
             // 终止forEach循环
             return false;
           }
         });
       }
       return result;
     }
     var ret = getCookie('abc');
     console.log(ret);

  • 封装设置 cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 封装一个方法设置cookie
    function setCookie(key,value,options){
      var cookie = key + '=' + value;
      if(options){
        for(var key in options){
          cookie += '; ' + key + '=' + options[key];
        }
      }
      document.cookie = cookie;
    }
    var date = new Date();
    date.setDate(date.getDate() + 1);
    setCookie('hello','abc',{
      expires : date.toGMTString(),
      path : '/'
    });
    console.log(getCookie('hello'));

  • jQuery.cookie.js
    cookie 的 jQuery 插件一些 api 使用：

    1
    2
    3
    4
    5
    6
    7
    8
    // 获取所有的cookie，并且父路径可以获取子路径的 cookie
    var all = $.cookie();
    // 获取指定的cookie，并且父路径可以获取子路径的 cookie
    console.log($.cookie('key'));
    // 设置 cookie
    $.cookie('name','list',{expires : 3,path : '/'});
    // 删除 cookie,当不设置路径时，删除的是当前路径的 cookie
    $.removeCookie('uname',{path : '/'});

验证 cookie 和 session 要从服务器中打开哦！（没有的话要先配置环境 Apache）

session (服务器端)

session的原理：浏览器第一次登陆服务器，服务器会生成一个sessionID，然后以响应头的形式返回给浏览器，那么后续所有的请求都会以请求头的形式传递给服务器，这样就建立起了客户端与服务器之间的状态

由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的，但实际上它还有其他选择（可以借助URL重写的方式解决问题）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$uname = $_GET['uname'];
$pw = $_GET['pw'];
if($uname == 'admin' && $pw == '123'){
  // 开启session 当前端传入正确 生成一个 phpsessid  保存在会话 cookie 
  session_start();
  $_SESSION['uname'] = $uname;
  // session存储数据
  $num = $_SESSION['num'];
  if($num){
    $_SESSION['num'] = $_SESSION['num'] + 1;
  }else{
    $_SESSION['num'] = 1;
  }
  
}
// 销毁session
session_destroy();
CATALOG
  1. 1. cookie
  2. 2. session (服务器端)
Archive Tag
Total : 17
2016
2015
demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack