【JavaScript】改めてWeb storage(localStorage,sessionStorage) とcookieの違い

表題のような比較で違いを示している日本語記事がなかったので改めて。。
Local Storage vs Cookies
Local storage vs. Cookies: What's the difference?

目的が違う
cookie
データがサーバー側で必要なら

WebStorage
データがクライアント側で必要なら

データ容量が違う
cookie
4096 bytes

LocalStorage
5M（ドメインごと）

期限が違う
cookie
期限がある

LocalStorage
clearかremoveするまで残る

安全性が違う
cookie
JWT(JSON Web Token) or JWE(JSON Web Encryption)をつかって暗号化できる
上記を使わない場合
cookieはHTTPリクエストでHTTPヘッダーにdataを格納して送るため、セキュリティ上好ましくない

localStorage
・XXS攻撃に弱い
・当然HTTPヘッダーで送信しない
ここ

localStorageの注意点
・localStorageはgetItem時同期的に読み込む(ロードされている時全てのレンダリングはブロックされる)
・リクエスト時にメモリ上にキャッシュるするため多くのタブが開いているとメモリ
を食う
・そのサイトを訪れなくなってもlocalStorageに(removeしていないと)データが残りメモリを食う
・setItemがiPhoneのプライバシーモードで使えない。これで解決できるかも

Referrence
https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage
https://openid-foundation-japan.github.io/draft-ietf-oauth-json-web-token-11.ja.html#HdrReg
https://qiita.com/kaiinui/items/21ec7cc8a1130a1a103a
https://stackoverflow.com/questions/3220660/local-storage-vs-cookies
https://people.rit.edu/tlh4225/736/exercises/storageWriteup.html
https://dev.mozilla.jp/2012/03/there-is-no-simple-solution-for-local-storage/