Expressによるリクエスト処理の基本 (4/4)

■クッキーの利用

ちょっとしたデータの保管に多用されるのが「クッキー」です。Expressには、クッキーを利用するための機能がひと通り用意されています。それらの使い方を整理しておきましょう。

・ライブラリのロード

《Application》.use(express.cookieParser());

クッキーを利用する場合、expressの「cookieParser」をロードしておきます。これによりクッキーの情報をオブジェクトとして扱えるようになります。

・クッキーの保存

《Response》.cookie( 名前 , 値 [, オプション] );

クッキーを保存する場合、Responseのcookieメソッドを呼び出します。値につける名前と保存するテキストを指定するだけです。第３引数に、オプション設定を連想配列として用意することもできます。例えばクッキーの有効期限をexpiresという値として持たせたりすることができます。

・クッキーの取得

《Request》.cookies.名前

クッキーの値は、cookieParserによりRequestの「cookies」プロパティにまとめられます。この中に、クッキーの名前のプロパティが作成され、そこにそれぞれの値が保管されます。

では、以下に簡単な利用例を挙げておきましょう。先の/heloを使ったサンプルをそのまま利用しています。

/heloのフォームに何か書いて送信すると、それがクッキーに保管されます。以後、/heloにアクセスすると、保管してあった値が表示されるようになります。ここでは10分間だけクッキーを保管しておくようにしてありますが、expiresを調整してもっと長く保管させることもできます。

ここではhelo.jsのrouter.postでres.cookieを使ってクッキーを保管し、router.getでreq.cookies.lastdataからクッキーの値を取り出し表示する、ということを行なっているだけです。クッキーの利用は、Expressを使えばずいぶんと楽にできることがよくわかりますね！

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※routers/helo.js

var express = require('express');
var router = express.Router();

/* GET helo page. */
router.get('/', function(req, res, next) {
    var str;
    try {
        str = req.cookies.lastdata;
    } catch(e){}
    res.render('helo', 
        {
            title: 'HELO Page',
            msg: 'please type...',
            cookie: "last:" + str,
            input: ''
        }
    );
});

/* POST helo page. */
router.post('/', function(req, res, next) {
    var str = req.body.input1;
    res.cookie("lastdata",str,
        { expires: new Date(Date.now() + 600000)});
    res.render('helo', 
        {
            title: 'HELO Page',
            msg: "you typed: " + str,
            cookie: str,
            input: str
        }
    );
});

module.exports = router;


※views/helo.ejs

<!DOCTYPE html>
<html>
    <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body onload="init()">
    <h1><%= title %></h1>
    <p><%= msg %></a>
    <p><%= cookie %></p>
    <form id="form1" name="form1" method="post" action="/helo">
        <input type="text" id="input1" name="input1"
            value="<%= input %>">
        <input type="submit" value="click">
    </form>
</body>
</html>

<< 前へ　

記事のリストに戻る

PC Site G+ mail