cookieを使ってみる


cookieとは

cookieとはWEBサイトにおいて、IDやパスワードなどの会員情報や、IPアドレスを保存してくれるブラウザの機能です。
cookieがあるお陰で、いちいちログインし直す手間が省けたりします。

参考:WEB担当者Forum

cookieの仕組み

cookieはHTTPが用いられます。クライアントがWEBサーバーにHTTPリクエストを送った(ブラウザがWEBサイトにアクセスした)際に、WEBサーバーから、ページの情報と一緒にcookie情報が(HTTPレスポンスで)送られてきます。ブラウザはこのcookie情報を保存してくれます。
再び同じWEBサイトにアクセスした際に、ブラウザはこのcookie情報を確認します。
そしてそのcookie情報をWEBサイト(WEBサーバー)に送信(リクエスト)し、WEBサーバーからそのcookie情報に基づいたWEBサイトが表示されるというわけです。

参考:WEB担当者Forum

Node.jsでcookieを利用してみる。

まずはindex.jsファイルに以下のようなサーバー情報を書き込みます。

index.js
'use strict';
const http = require('http');
const server = http.createServer((req, res) => {
  res.end('hello node.js');
});
const port = 8000;
server.listen(port, () => {
  console.info('Listening on ' + port);
});

これは、一般的なサーバー立ち上げファイルですね。
ここに以下のような記述をすることで、cookie情報を扱うサーバーに変身します。

index.js
'use strict';
const http = require('http');
const server = http.createServer((req, res) => {
 //res.setHeaderでヘッダーの設定ができる
  res.setHeader('Set-Cookie', 'last_access=' + Date.now() + ';');
  res.end('hello node.js');
});
const port = 8000;
server.listen(port, () => {
  console.info('Listening on ' + port);
});

cookie情報を扱うために、レスポンスヘッダのSet-Cookieという項目に、 キー名=値;という形式で値を書き込みます。
キー名=値; expires=日付;というようにexpiresという有効期限を設定することもできます。

それでは、サーバーを立ち上げてcookieを確認してみます。
サーバーを立ち上げて、

$ node index.js

以下のURIにアクセスします。
http://localhost:8000

以下のような表示が出たら成功です。

続いてデベロッパーツールを開いてみます。

以上は、デベロッパーツールのApplicationという欄を押して、左側のStrageという欄のCookiesの中のhttp://localhost:8000というところをクリックすると表示されます。


Nameという列にさきほどサーバーファイルで指定した、last_access
Valueという列にDate.now()が表示されます。Date.nowは今の時間をミリ秒で表した数字になります。

ちなみにこのcookieは、req.headers.cookieで取得することができます。
index.jsファイルを以下のように変更してみてください。

index.js
'use strict';
const http = require('http');
const server = http.createServer((req, res) => {
  const now = Date.now();
  res.setHeader('Set-Cookie', 'last_access=' + now + ';');
  res.end(new Date(now).toString());
});
const port = 8000;
server.listen(port, () => {
  console.info('Listening on ' + port);
});
const now = Date.now();
res.setHeader('Set-Cookie', 'last_access=' + now + ';');
res.end(new Date(now).toString());

が変更部分です。
1行目で、変数nowにDate.now()を代入します。
2行目で、last_accessの部分を変数nowとしています。
3行目はブラウザにnowを表示するようにしています。
new Date()はデータオブジェクトを作ってるのですが、その際に
()内に指定したnowの、現在時間ミリ秒157417...をTue Nov 19 2019 22:44:31 GMT+0900 (GMT+09:00)という読みやすい形式に直してくれます。ただこのままだと、文字列として扱えないので、.toStringで文字列に変換しています。

サーバーを立ち上げると以下のような表示になっているはずです。

これでcookieの取得の完了です。
今回は日付をサーバーがcookieとして返してくれましたが、
IDやパスワードの情報を送ったりすることもできます。
ただ、このようなやり方は実践的でないため、実際に使う際はモジュールを使います。

参考:new Date()の使い方
参考:N予備校 プログラミングコース