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是右键->查看元素->储存):