Web Storage vs Cookie! どのように違って、どのように使うの？

動機

半年前にWeb Storageというものフロントエンドに詳しい友達から知りました。

それ以来、Web Storageのことを思い浮かぶこともなかったのですが、ちょっと時間があるので調査していこうと思います。

アジェンダ

本記事のアジェンダはこちらになります。

Web Storageの起源

HTTPプロトコルがステートレス(=状態を持たない)であることが問題です。

一般的には、過去にバッグを閲覧していた人は

• 同じ、または別のバッグを購入する
• ポーチを購入する

などのような因果関係がある可能性があります。それなのに状態を持たないということは、毎回同じページを返してしまい、例えばワンピースがページのほとんどを占めているページかもしれません。そのようにユーザーの期待にそぐわないページは

• ユーザー体験を下げてしまう
• 購入機会の損失

など、あらゆる問題を生んでしまいます。

つまり、この問題を解決するにはステートフルであればいいので

• 何かしらクライアントが状態を保持して、サーバーサイドに渡して、状態に応じたレスポンスを返す

という流れがしっくりきます。

つまり、図示すると以下のようになります。あくまでも一例に簡単な例で説明しているので注意してください。

これによって、ユーザー体験を向上させることができると思います。

Web Storageとは

Web Storageとは、

ブラウザ(ローカル)のKVS (Key-Value Storage)の保存領域

です。つまり、データを格納したり、削除したり、データベースのように使うことができます。

どのように使うのか

Web Storageはクライアントサイドからアクセスできるデータベースのような役割をします。

つまり、もしサーバーサイド側にその情報が必要となれば、それを送信しなければならないということを意味しています。

とりわけ、クライアントサイド(Javascript)からアクセスをして、メリットがでるような使い方をするのがいいでしょう。

アクセスしてみる

Chrome DevToolからアクセスする

"Application"タブの"Storage"にいくつかストレージがあります。例えば"Local Storage"を開いてみましょう。

ここではWeb Storageを包括的に見ることができます。

いくつかURLに基づいて保存されていることが分かります。

Yahoo!のトップページだと、以下のようにKey-Valueで保存されていることがわかります。

このように、どのようなデータがWeb Storageに保存されているかが分かります。

Javascriptからアクセスする

クライアントサイドからアクセスをするのがWeb Storageであるので、もちろんJavascriptからアクセスすることができるはずです。

1. Windowオブジェクトを理解する

フロントエンドを少しでも知っていたらdocumentがWebページを構成するHTML要素であるのと同じようにWindowオブジェクトについても理解しているかもしれませんが、知らない人とために解説をします。

Windowとはレンダリングツリーを実際のピクセルに対して変換するペインティング(またはラスタライジング)の家庭で定義されるインタフェースです

つまり、必ずしもではありませんが、パソコンで見えているページの「窓」のような役割があり、もちろんタブ毎にwindowオブジェクトが存在します。

またwindowオブジェクトは省略可能であり、本来は

window.alert("Help!”）

のように書かなければなりませんが

alert("Help!")

のように書くことができます。

2. Web Storage APIにアクセスする

localStorageやsessionStorageはWindowインタフェースのプロパティであるので次のようにアクセスをすることができます。

localStorage

// or

window.localStorage

すると以下のようになります。

これから分かるようにStorageオブジェクトです。

試しに、自ら格納してみましょう。ここでは永続的に保存をしてほしくないのでSession Storageで保存します。

window.sessionStorage.setItem("testKey","testValue")

そして参照をしてみましょう。

window.sessionStorage["testKey"]
"testValue"

と返ってきて格納できてることがわかるでしょう。

注意点

Web Storageは同期的であるので、ドキュメントのレンダリングをブロックする可能性があるので使用には注意をしてください。

Cookieとは

この節ではCookieについて解説していこうと思います。

Cookieの大まかなイメージ

Cookieとは、どのようなものでしょう。

Cookieとはブラウザに保存される証明証のような役割を持つデータを保存するプロトロルです

Cookieの用途

実際に使用するときは、以下のようにやり取りをします。

HTTPプロトコルがステートレスなプロトコルであるためCookieを使うことによってステートフルなやり取りを実現します。

これによって、ユーザーに応じたレスポンスが可能となっています。

どのように保存されているか

必要性の観点から、一般的にはユーザーが見る機会はないですが見ることは可能です。

Firefoxでは一つのファイルに保存されていますが、他のブラウザではそれぞれのクッキーが一つずつ別のファイルで保存されていることが多いです。

Cookieの指定方法と有効期限

CookieはサーバーからのレスポンスでSet-Cookieヘッダーを送信することでCookieはブラウザに保存され、同じドメインに対してリクエストをするときに送信されます。

保存させるときのヘッダーは以下のようにします。

Set-Cookie: <cookie-name>=<cookie-value>

このヘッダーは、サーバーからクライアントへ Cookie を保存するよう指示します。

基本的にはブラウザを閉じるとCookieは削除されてしまいますが、1ヶ月など指定をすることも可能です。

また有効期限をExpiresで、または指定期間をMax-Ageで指定することができます。

Set-Cookie: id=a4heac; Expires=Wed, 21 Oct 2019 03:28:00 GMT

セキュリティに関して

HTTPSプロトコルを通じた暗号化されたリクエストでのみサーバーを送れるセキュアCookieをSecureフラグをつけて指定することができます。

Cookieはサーバーサイドで使用するために送信するにも関わらず、Javascriptでも参照しようと思えば参照できます。

しかし、セキュリティ上好ましくない(クロスサイトスプリティング攻撃)のでHttpOnlyフラグをつけて送ります。

Set-Cookie: id=a4heac; Expires=Wed, 21 Oct 2019 03:28:00 GMT, Secure, HttpOnly

Cookieのスコープ

Cookieは先ほどもいいましたが、HTTPリクエストのヘッダー部分に格納されます。 つまり、あるドメインAのCookieを別のサイトドメインBに対しては、Cookieは不必要であり、通信コストになってしまいます。

なので、Domainディレクティブ、またはPathディレクティブでCookieのスコープを指定します。

Domain=1915keke.comならばwww.1915keke.comのようなサブドメインにも有効ですし、PathはさらにPath=/portfolioなどで定義され

• /portfolio/golang
• /portfolio/frontend/vue

にも一致します。このようにして、Cookieを必要な時に送信するようにしましょう。

Web StorageはCookieとどう違うの

たまにWebサイトを閲覧していると「Cookieの使用を許可してください」というようなポップアップやトーストがでるシーンがあると思います。

共通点としては

• クライアントから参照をすることができる
• 保存するデータをKey-Valueで保存する

違う点としては

• 大きなデータ量を簡単に取り扱える
• Cookieは通信ごとに毎回勝手に送信される

という点があります。

しかし、用途が大きく違います。

Cookieの情報はサーバーサイドが使用するのに対して、Web Storageはクライアントサイドからしか参照することができません。

基本的にはCookieにはJavascriptからアクセスはできません。

用途に応じて選択する必要があり、例えばクライアントサイドだけで参照するものをサーバーサイドに送れば帯域を無駄にしていることになります。

stackoverflow.com

Web StorageはJavasciptによって簡単にアクセスできるため、サーバーで参照の必要性がないものはWeb Storageで格納するといいでしょう。

Webストレージの種類とCookieの比較

Webストレージは

	有効期限	データ量
Local Storage	永続的に有効	ドメインに対して5MB
Session Storage	ウィンドウ・タブを閉じるまで	ドメインに対して5MB
Cookie	ウィンドウ・タブを閉じるまで、または指定期限まで	4KB

終わりに

Cookie、Sessionに加えてWeb Storageについて深く知ることはアプリケーションの幅が広がるのではないかという高く期待しています。

本記事がこれからアプリケーションを作る人、今現在作っている人の役に立てれば望外の喜びです。

ご覧いただき、誠にありがとうございました。

参考文献

medium.com