cookieを使ってみる

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

参考：[WEB担当者Forum](https://webtan.impress.co.jp/g/cookie)
###cookieの仕組み
cookieはHTTPが用いられます。クライアントがWEBサーバーにHTTPリクエストを送った（ブラウザがWEBサイトにアクセスした）際に、WEBサーバーから、ページの情報と一緒にcookie情報が（HTTPレスポンスで）送られてきます。ブラウザはこのcookie情報を保存してくれます。
再び同じWEBサイトにアクセスした際に、ブラウザはこのcookie情報を確認します。
そしてそのcookie情報をWEBサイト（WEBサーバー）に送信（リクエスト）し、WEBサーバーからそのcookie情報に基づいたWEBサイトが表示されるというわけです。

参考：[WEB担当者Forum](https://webtan.impress.co.jp/g/cookie)


#Node.jsでcookieを利用してみる。
まずはindex.jsファイルに以下のようなサーバー情報を書き込みます。

```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情報を扱うサーバーに変身します。

```JS: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

以下のような表示が出たら成功です。
![スクリーンショット 2019-11-19 22.26.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/21324225-451f-2019-54a4-afeac300d060.png)

続いてデベロッパーツールを開いてみます。
![スクリーンショット 2019-11-19 22.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/fdf5dd33-b8b5-3c05-0f16-f0c90c422f84.png)

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

![スクリーンショット 2019-11-19 22.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/dd3bb92e-9627-e930-4cea-3f80a89059d4.png)
Nameという列にさきほどサーバーファイルで指定した、last_access
Valueという列にDate.now()が表示されます。Date.nowは今の時間をミリ秒で表した数字になります。

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

```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で文字列に変換しています。

サーバーを立ち上げると以下のような表示になっているはずです。
![スクリーンショット 2019-11-19 22.56.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374924/312e8102-b7d0-02a2-6841-91e525f5071e.png)

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

参考：[new Date()の使い方](http://cly7796.net/wp/javascript/how-to-use-new-date/)
参考：[N予備校 プログラミングコース](https://www.nnn.ed.nico/courses/497/chapters/6890)