cookie,session存储

最新推荐文章于 2023-03-20 21:00:57 发布

zxf318

最新推荐文章于 2023-03-20 21:00:57 发布

阅读量1k

点赞数 2

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/zxf318/article/details/126773304

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

session在浏览器控制台不会暴露，cookie会暴露所以验证码等用session存储

引用了axios模块需自行下载，下载依赖文件npm i ，下载跨域模块npm i --save egg-cors，

cookie:

客户端数据存储：限制在同源

同源策略：浏览器的一种安全防范策略

同源：协议、域名、端口相同，我们就说同源

localStorage

sessionStorage

localStorage、sessionStorage区别:

1.通过localStorage存储数据，只要不清除，就永久保存

通过sessionStorage存储数据，只要浏览器窗口一关闭就失效

2.存储大小：5M

3.localStorage限制在同源，sessionStorage存储的数据不仅限制在同源，还限制在同一窗口

cookie：

1.存储大小：4k

2.过期时间如果不设置，那么就是窗口一关闭就失效，如果设置了，那么就是设置了多久就多久失效

前端设置document.cookie=`cookie:属性名=属性值；过期时间；地址`;模板字符串反引号
 document.cookie = `clientNum=111;max-age=${24 * 60 * 60};path=/`;
后端数据存储：

cookie: 设置cookie: ctx.cookies.set(key,value)

获取cookie: ctx.cookies.get(key)

1.后端的cookie的存储位置：后端设置的cookie会存储在客户端浏览器里面

2.后端设置cookie，限制在同源才能正常存储，如果想要在跨域的情况下也要正常存储，那么就需要设置允许跨域存储cookie

3.客户端浏览器里面的cookie会出现在请求头里面，原因是每次发起请求的时候都会携带客户端里面存储的cookie发给服务器（不管是前端设置的，还是后端设置的）

注意：前端设置的cookie虽然会每次发起请求都会携带给后端服务器，但是后端服务器是拿不到的（不能通过ctx.cookies.get(前端的key)获取到前端）

后端设置的cookie，虽然保存在客户端浏览器里面，但是前端去获取，是获取不到的（document.cookie获取不到后端的cookie）

允许跨域设置cookie：

后端egg:

// 跨域的配置：后端服务器下/config/config.default.js
 config.cors = {

            // origin: '*', //允许的域，*代表所有的

            origin: 'http://127.0.0.1', //允许的域，必须指定默认端口号可不加，

            allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',//允许跨域的请求方法

            credentials: true//后端允许跨域携带cookie

        };
//跨域处理后端服务器下 /config/plugin.js下载模块 npm i --save egg-cors
  cors: {

    enable: true,

    package: 'egg-cors',

  },
前端：

axios.post(url,dataObj,{withCredentials: true })

axios.get(url,{params:dataObj, withCredentials: true })

ajax请求是异步的，一个页面可能会同时发起多个ajax请求，

ajax请求并不是哪个在前面，哪个就先请求完执行

而是当一个页面同时发起多个ajax请求的是，发起的多个ajax请求都是同时进行的，谁先请求后端服务器完成，谁就先执行

当一个页面同时发起多个ajax请求的时候，哪一次ajax请求先完成是不确定的

例如下面这个例子：ajax请求异步不能正常存储：

前端html：前端服务器下此处用的小皮，在它的WWW下创建文件

 <script src="./js/axios.min.js"></script>
 <script>
 axios.get(`http://127.0.0.1:7001/setcookie`)
            .then(function (response) { 
                console.log(response);
            .catch(function (error) {
                console.log(error);
            });

axios.get(`http://127.0.0.1:7001/getcookie`)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            }); 
 </script>

路由：

 router.get('/setcookie', controller.home.setcookie);
  router.get('/getcookie', controller.home.getcookie);

后端：与路由地址对应要打开服务器下app/controller/home.js

async setcookie() {
    const { ctx } = this;
    // 设置cookie通过ctx里的API（cookie）
    /*  ctx.cookies.set(key, value, {
       httpOnly: true, //
       encrypt: true//加密传输  第三个值可省
     }); */
    ctx.cookies.set('num1', 100);
    ctx.cookies.set('num2', 200);
    ctx.body = 'cookie设置成功';
  }
  async getcookie() {
    const { ctx } = this;
    // 获取cookie:ctx.cookies.get(key)
    let num1 = ctx.cookies.get('num1');
    let num2 = ctx.cookies.get('num2');
    ctx.body = {
      num1,//语法糖num1:num1,
      num2
    };
  }

访问setcookie结果：

访问getcookie结果：

正常存储：

1.都放在后端服务器egg下：直接复制文件到app/public下面

2.把getcookie放在setcookie里且允许跨域携带：

        axios.get(`http://127.0.0.1:7001/setcookie`, {
            withCredentials: true//允许跨域携带凭证(cookie)    必须设置才能正常存储和获取
        })
            .then(function (response) { //请求完成并成功才返回获取
                console.log(response);
                axios.get(`http://127.0.0.1:7001/getcookie`, {
                    withCredentials: true//允许跨域携带凭证(cookie)
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            })
            .catch(function (error) {
                console.log(error);
            });



        // 前端设置cookie
        document.cookie = `clientNum=111;max-age=${24 * 60 * 60};path=/`;

session:

后端在用session存储数据的时候，会创建一个cookie（EGG_SESS），这个cookie会自动保存在客户端浏览器里面

用session存储数据的时候，会创建一个唯一的cookie（EGG_SESS），然后当后端要获取存储的session数据时，

必须根据在存储session的时候创建的这个cookie值解析对应的session

同时几个人去注册的时候，每个人用的是不同的浏览器，

发送验证码的时候，后端用session去存储验证码，在存储的时候会产生一个唯一cookie，

产生的唯一的cookie会保存在对应的这个人的浏览器里面，那么立即注册的时候，

获取的存储的session，是根据对应的这个人的浏览器里面存储的cookie解析出来的，

所以说不会存在覆盖。

前端html

  <script src="./js/axios.min.js"></script>
    <script>
        axios.get('http://127.0.0.1:7001/setsession',{
            withCredentials: true//允许跨域携带凭证(cookie)
        })
            .then(function (response) {//请求完成并成功
                console.log(response);
                console.log(document.cookie);
                axios.get('http://127.0.0.1:7001/getsession',{
                    withCredentials: true//允许跨域携带凭证(cookie)
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            })
            .catch(function (error) {
                console.log(error);
            });
    </script>

后端：跨域请求等相同

 async setsession() {
    const { ctx } = this;
    // 设置session:ctx.session.属性名 = 值;
    ctx.session.id = 101;
    ctx.session.account = '18965989898';
    ctx.body = 'session设置成功';
  }
  async getsession() {
    const { ctx } = this;
    // 获取session:ctx.session.属性名
    let id = ctx.session.id;
    let account = ctx.session.account;
    ctx.body = {
      id,account
    };
  }