Node.js + Express + express-session でセッション変数を使ってみる

10411 ワード
body-parser express-session Express Node.js Node.js テキストリンク

Express + express-session でセッション変数を試す

事前準備として、フォルダ作ったりパッケージインストールしたりする

mkdir exps_test
cd exps_test
npm install --save express \
                   express-session \
                   body-parser \
                   ejs

http で確認したいので、 index.ejs を作っておく

index.ejs は view として作るので、views フォルダを作っておく

views フォルダ内に index.ejs を作る

mkdir views
cd views
nano index.ejs

index.ejs の内容はコレ

index.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p><%=message %></p>
    <form action="/" method="post">
        <input type="text" name="message">
        <button type="submit" name="button">send</button>
    </form>
    <a href="/">LastUpdateData</a>
</body>
</html>

exps_test フォルダに戻って、nodeで起動するための index.js を作る

cd ../
nano index.js

index.js の内容はコレ

index.js
const express = require('express');
const ejs = require('ejs');
const bodyParser = require("body-parser");
const session = require("express-session");
const app = express();

app.set('ejs', ejs.renderFile);

app.use(bodyParser.urlencoded({ extended: false }));

app.use(session({
    secret: "secret",
    resave: false,
    saveUninitialized: true,
}));

app.get('/', (req, res) => {
    let message = 'no message';
    if (req.session.message != undefined) {
        message = "LastUpdateData：" + req.session.message;
    }
    res.render('index.ejs', {
        message: message
    });
});

app.post("/", (req, res) => {
    let message = req.body.message;
    req.session.message = message;
    res.render('index.ejs', {
        message: message
    });
});

app.listen(3000, () => {
    console.log('Example app listening on port 3000!');
});

node.js で index.js を起動する

$ node index.js
Example app listening on port 3000!

ブラウザでアクセスする

↓こんな感じになるはず

何かしらメッセージを入力してSendすると、no message の所が変わります。
LastUpdateData をクリックすると、最後に入力した内容が表示されます。
ブラウザを閉じるとデータが消えるので no message に戻るはず。
node を再起動してもデータが消えるので no message に戻ります。

session 設定しているとこに cookie の設定を足すと、データの有効期限が付けられたりします。
↓こんな感じにすると5秒後に LastUpdateData をクリックした場合、 no message に戻ってます。

app.use(session({
    secret: "secret",
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 5 * 1000 }
}));

参考