上一节实现了get和post的接口请求模拟，对于一个前端项目而言，肯定有登陆功能，而登陆，基本都会用到存储相关的知识，所以下面就讨论下存储在koa中的应用。
1、cookies存取
- 先来个简单版的
//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');
//实例化
const app = new Koa();
const router = new Router();
//配置静态资源中间件
app.use(static(__dirname + '/static'));
//配置模板引擎中间件
app.use(
views('views', {
extension: 'ejs'
})
);
router.get('/', async ctx => {
// 设置 cookie，encodeURIComponent对内容进行编码存储
ctx.cookies.set('userinfo', encodeURIComponent('张三'), {
maxAge: 10 * 1000
});
await ctx.render('index', {});
});
router.get('/news', async ctx => {
// 获取 cookie，decodeURIComponent对获取的内容进行解码
console.log(decodeURIComponent(ctx.cookies.get('userinfo')));
await ctx.render('index', {});
});
//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
重启服务，刷新浏览器，然后输入http://localhost:3000/news，就可以看到命令行输出张三
chenhy-2:koalern chenhaoyin$ node app.js
张三
- 进阶版
结合上节的接口请求知识，我们利用表单在页面展示cookies。
先改造一下html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<form action="/" method="post">
<button type="submit">
设置cookies
</button>
<input type="text" name="username" />
</form>
<br />
<form action="/news" method="post">
<button type="submit">获取cookies</button>
<span class="text"><%= cookies?cookies:'' %></span>
</form>
</body>
</html>
然后是配置文件
//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');
const bodyParser = require('koa-bodyparser');
//实例化
const app = new Koa();
const router = new Router();
//配置静态资源中间件
app.use(static(__dirname + '/static'));
//配置 koa-bodyparser 中间件
app.use(bodyParser());
//配置模板引擎中间件
app.use(
views('views', {
extension: 'ejs'
})
);
let cookies = '';
router.get('/', async ctx => {
cookies = ''; // 先清空
await ctx.render('index', { cookies });
});
router.post('/', async ctx => {
let { username } = ctx.request.body;
console.log('设置', username);
// 设置 cookie
ctx.cookies.set('username', encodeURIComponent(username));
await ctx.render('index', { cookies });
});
router.post('/news', async ctx => {
// 获取 cookie
cookies = decodeURIComponent(ctx.cookies.get('username'));
console.log('获取', cookies);
await ctx.render('index', { cookies });
});
//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
重启服务，刷新浏览器，并在输入框输入蝙蝠真好吃，🦇无汗红十字真能耐，画面如下
点击“设置cookies”，然后点击获取，就能得到输入的并转存到cookies到内容
衔接上一节的内容并得到想要的结果，完美！
- 当然，koa对cookies的操作能力并没有那么简单，详见下表
存储中，常用的除了cookies，还有session，所以接下来就看下session在koa中的应用。
2、koa-session 中间件
- 先下载
yarn add koa-session - 然后接着上面的代码，在配置中使用该中间件
//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const static = require('koa-static');
const session = require('koa-session');
const bodyParser = require('koa-bodyparser');
//实例化
const app = new Koa();
const router = new Router();
//配置静态资源中间件
app.use(static(__dirname + '/static'));
//配置模板引擎中间件
app.use(
views('views', {
extension: 'ejs'
})
);
//配置session的中间件
app.keys = ['some secret hurr']; /**cookie的签名 默认*/
const CONFIG = {
key: 'koa:sess' /** 默认 */,
maxAge: 10000 /** cookie的过期时间 */,
overwrite: true /** 默认 可以重写过期时间 */,
httpOnly: true /** true表示只有服务器端可以获取 cookie */,
signed: true /** 默认 签名 */,
rolling: true /** 在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false） */,
renew: false /** 当用户进行浏览器操作时刷新 cookie 过期时间 */
};
// 跟其他中间件一样，都是通过 app.use(中间件) 的方式使用
app.use(session(CONFIG, app));
//配置 koa-bodyparser 中间件
app.use(bodyParser());
//配置模板引擎中间件
app.use(
views('views', {
extension: 'ejs'
})
);
let cookies = '';
router.get('/', async ctx => {
cookies = ''; // 先清空
await ctx.render('index', { cookies });
});
router.post('/', async ctx => {
let { username } = ctx.request.body;
console.log('设置', username);
// 设置 session
ctx.session.userinfo = username;
await ctx.render('index', { cookies });
});
router.post('/news', async ctx => {
// 获取 session
cookies = ctx.session.userinfo;
console.log('获取', cookies);
await ctx.render('index', { cookies });
});
//启动路由
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
-
重启服务，刷新浏览器，输入想输入的内容，最终得到结果
cookies和session
最终，复习一下两者的区别：
1、cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2、cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session。
3、session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用 cookie。
4、单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。
网友评论