11.Egg.js教程-Cookie的增删改查

EJS 模板就先学这么多，本文我们学习一下 Cookie 的相关知识。Cookie 的作用就是在浏览器客户端留下一些数据，比如我们经常使用的登录一个网站，下次再来的时候就不用再次登录了。但是 Cookie 是可以设置时间限制的，所以经常看到 7 天内不用重复登录，这样的信息。

对 Cookie 的简单了解

HTTP 请求是无状态的，但是在开发时，有些情况是需要知道请求的人是谁的。为了解决这个问题，HTTP 协议设计了一个特殊的请求头：Cookie。服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保留，并在下一次请求同一个服务的时候带上。

编写前基本准备

你初步了解 Cookie 后，我们来进行实际操作。

我们先来了解在 Egg 下，如何实现 Cookie 的增删改查，这也是最基本的操作。（提示，在实际开发中 Cookie 的操作应该放在服务端，而不是用客户端的 JS 操作。）

在讲解之前，我们还是要作一些提前的代码编写，比如设置好对应的按钮、Controller 方法和路由。

我们先来到上节的/app/view/mybj.html模板中，编写四个按钮，分别是增加 Cookie、删除 Cookie、修改 Cookie和查看 Cookie。

<div>
    <button onclick="add()">增加 Cookie</button>
    <button onclick="del()">删除 Cookie</button>
    <button onclick="editor()">修改 Cookie</button>
    <button onclick="show()">查看 Cookie</button>
</div>

写完按钮后，增加对应的 JavaScript 方法。

可以先写一个方法，然后其它的复制后进行修改。就可以快速写出这些代码了。

<script>
    function add(){
        fetch("/add",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function del(){
        fetch("/del",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function editor(){
        fetch("/editor",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
    function show(){
        fetch("/show",{
            method:"post",
            headers:{
                "Content-type":"application/json"
            }
        });
    }
</script>

再去/app/controller/mybj.js文件下，增加这四个对应的方法。

async add(){
  const ctx = this.ctx
}
async del(){
  const ctx = this.ctx
}
async editor(){
  const ctx = this.ctx
}
async show(){
  const ctx = this.ctx
}

最后再到/app/router.js中配置对应的路由

router.post('/add', controller.mybj.add);
router.post('/del', controller.mybj.del);
router.post('/editor', controller.mybj.editor);
router.post('/show', controller.mybj.show);

作完上面这四步，我们的基本结构就有了，剩下就可以好好的学习 Cookie 的基本操作了。

Cookie 的增加操作

先到/app/controller/mybj.js文件的add()方法里编写代码。其实 egg 已经为我们准备好了操作 Cookie 的方法，直接使用即可。

async add(){
  const ctx = this.ctx
  ctx.cookies.set("user","mybj123.com")
  ctx.body = {
    status:200,
    data:'Cookie 添加成功'
  }
}

这部分代码写完后，就可以可以在终端中开启服务，输入npm run dev开启。

来到页面点击增加 Cookie按钮，然后按F12打开调试模式，找到Application，可以看到Cookie值已经被加入进来了。

Cookie 的删除操作

再来看一下 Cookie 的删除操作，再来到/app/controller/mybj.js文件。修改del()方法。

async del(){
  const ctx = this.ctx
  ctx.cookies.set("user",null)
  ctx.body = {
    status:200,
    data:'Cookie 删除成功'
  }
}

写好后，直接到浏览器中点击删除，就可以删除Cookie了。

Cookie 的修改操作

修改操作和删除和增加一样。直接修改值就可以了。

async editor(){
  const ctx = this.ctx
  ctx.cookies.set("user",'www.mybj123.com')
  ctx.body = {
    status:200,
    data:'Cookie 修改成功'
  }
}

然后我们到浏览器修改一下。

Cookie 的显示操作

显示 Cookie 要使用ctx.cookies.get()方法。

async show(){
  const ctx = this.ctx
  const user=ctx.cookies.get("user")
  console.log(user)
  ctx.body = {
    status:200,
    data:'Cookie 显示成功'
  }
}

点击按钮后，可以在 VSCode 的终端中显示出结果。当然，你也可以试着让它显示在页面上。