フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集261問(脱初心者へ)2016/09/10更新

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

【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
http://qiita.com/kaiinui/items/21ec7cc8a1130a1a103a
http://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/

(Visited 2 times, 1 visits today)