アクセスしてきたユーザーの情報を保存する時によく使われるCookie（クッキー）やSession（セッション）。
ユーザーの情報を保存するにはいいんですが、サーバアクセスするたびに自動送信するのでセキュリティは低いと言えるでしょう。

また、サーバが同じコンピュータに対して発行できるCookieの数が20個となっていて、制限があると膨大なデータを扱いたい時には少々使いづらいです。

それに比べてWeb Storageは、サーバの通信が発生しません。なのでセキュリティ面でも少し安全、データ保存量もCookieよりも多いです。

でも100％安全というわけではありません。
クロスサイトスクリプティング（XSS）などの対策をしていないとデータを盗まれる可能性があるので、個人情報レベルの大事な情報はむやみにWeb Storageに保存しまくらないように。

Cookieでは、ユーザーがアクセスする度にデータ通信が行われるが、Web Storageはそれがないのが素敵。

サーバとの通信量が減る。

容量の上限が大きい。


絶対、CookieよりWeb Storageのほうが魅力的だよね。

気になるWebブラウザのサポートですが、
2020年6月現在は、ほとんど対応しているので問題ないです。

Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=localStorage%20sessionStorage

 

ということで、今回はHTML5で追加されたWeb Storageのご紹介。


Web Storageとは


Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みで、JavaScriptでデータの保存や削除ができる。
また、Cookieとは違って保存するデータを簡単に上書きすることができます。

Web Storageには、sessionStorageとlocalStorageの2つのストレージが用意されていて、2つのストレージ合わせて1オリジン当たりのデータ量は5MB。
なので1サイトごとに5MBのデータ保存量があることになります。（データ保存量はブラウザによって異なります）
Cookieは上限4KBなので、Web Storageはものすごい保存量ってことです。


sessionStorageの使い方


保存データはウィンドウやタブを閉じるまで有効で、タブが閉じられた時にデータが削除される。

//データ保存
window.sessionStorage.setItem(key, value);
 
//データ取得
window.sessionStorage.getItem(key);
 
// データの削除
window.sessionStorage.removeItem(key);
 
//初期化（データをすべて削除）
window.sessionStorage.clear();



主に「保存、取得、削除、初期化」の4つの操作で保存データを取り扱っていきます。


localStorageの使い方


オリジン単位（「http://example.com:80/」のようにな「ドメイン：ポート番号」の組み合わせ）でデータを管理できるため、別ウィンドウやタブで同じ情報を共有できる。

有効期限はなく永久的に保存されます。

//データ保存
window.localStorage.setItem(key, value);
 
//データ取得
window.localStorage.getItem(key);
 
// データの削除
window.localStorage.removeItem(key);
 
//初期化（データをすべて削除）
window.localStorage.clear();



見ておわかりのとおり、sessionStorageとlocalStorageの記述の違いは「sessionStorage」と「localStorage」の文字くらいです。

覚えやすいですね。

上書きする場合は同じKeyに値をセット

//データ保存
window.localStorage.setItem('user', '1');
 
//同じKeyで値をセットすれば上書きとなる
window.localStorage.setItem('user', '2');

 

ただ気になるのはlocalStorageを使った場合、データを上書きする分にはいいと思いますが、どんどん保存するデータを増やしていくと有効期限はなく永久的だけあって必要なくなったゴミデータが溜まっていきます。
そこら辺はsessionStorageでいくのか、それともlocalStorageでいってもどこかのタイミングでデータを削除する処理をさせるなど、考えて使った方がよさそう。

JavaScriptで扱えるだけあって、Webサイトのトップアニメーションなんかを最初にアクセスした時だけ表示されたい時などは、sessionStorageの情報を使ってコントロールすることもできるでしょう。