Javascript cookie和session

一、cookie：

在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

二、session:

session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源，但现在服务器已经发展至今，一些session信息还是绰绰有余的。

三、cookie和session结合使用：

web开发发展至今，cookie和session的使用已经出现了一些非常成熟的方案。在如今的市场或者企业里，一般有两种存储方式：

1、存储在服务端：通过cookie存储一个session_id，然后具体的数据则是保存在session中。如果用户已经登录，则服务器会在cookie中保存一个session_id，下次再次请求的时候，会把该session_id携带上来，服务器根据session_id在session库中获取用户的session数据。就能知道该用户到底是谁，以及之前保存的一些状态信息。这种专业术语叫做server side session。

2、将session数据加密，然后存储在cookie中。这种专业术语叫做client side session。flask采用的就是这种方式，但是也可以替换成其他形式。

1.在javascript中管理cookie

<!DOCTYPE html>
<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <SCRIPT type="text/javascript">
 
        function save_cookie(){
            let d = new Date();
            let time = 10;
            let d_ = new Date();
            let time_ = 1000;
            d.setTime(d.getTime() + time*1000);                                     //设置过期时间为10秒
            d_.setTime(d_.getTime() + time_*1000);
            document.cookie = "first=" + escape("c/c++") + ";expires=" + d;
            document.cookie = "second=" + escape("java") + ";expires=" + d_;
        }
 
        function get_all_cookie() {
            let cookies = document.cookie.split(/; /g);                 //split函数为分割函数，第一个参数为从指定的地方分割，第二个参数为限制分割字符串的个数
            for(let i = 0;i < cookies.length;i++){
 
                let cookie = cookies[i];
                if(cookie.indexOf("=") == -1){                          //indexOf函数返回字符出现的下标
 
                    continue;
                }
 
                let name = cookie.substring(0, cookie.indexOf("="));                //substring 用于返回一个从指定位置开始到结束的指定长度的子字符串 原形:substring(start,end)
                let value = cookie.substring(cookie.indexOf("=") + 1);
                alert("cookie[" + i + "]: name=" + name + ", value=" + value);
            }
        }
 
        function get_cookie(name) {
            let pos = document.cookie.indexOf(name + "=");
            if(pos == -1){
 
                return null;
 
            }else{
 
                let pos_ = document.cookie.indexOf(";",pos);                        //indexOf的第二个参数为开始检索的位置
 
                if(pos_ == -1){
 
                    return document.cookie.substring(pos + name.length + 1);
 
                }else{
 
                    return document.cookie.substring(pos + name.length + 1,pos_);
                }
            }
        }
 
        function del_cookie() {
            let d = new Date();
            d.setTime(d.getTime());                                     //设置过期时间为10秒
            document.cookie = "first=" + escape("c/c++") + ";expires=" + d;
            document.cookie = "second=" + escape("java") + ";expires=" + d;
        }
 
        function get_info() {
            alert(get_cookie('second'));
        }
 
    </SCRIPT>
</HEAD>
 
<BODY>
    <button οnclick="save_cookie()">存放cookie</button>
    <button οnclick="get_all_cookie()">得到所有cookie</button>
    <button οnclick="get_info()">得到key=second的cookie的value</button>
    <button οnclick="del_cookie()">删除cookie</button>
</BODY>
</HTML>

下面是cookie的时间信息(firefox是右键->查看元素->储存):