ブラウザでデータを保存する方法○選！
なんてタイトルにしたが、選び取る以前に列挙する知識がない。
どんな選択肢があるのだろうか、５つくらいサイトを見た情報をまとめてみることにした。
Web Storage(Local Storage / Session Storage)
手始めに「ブラウザ データ 保存」で検索するとローカルストレージが検索にひっかかる。
やたらとローカルストレージでひっかかるがローカルストレージはWeb Storageの仕組みのうちの１つにすぎないらしい。
MDNに知識がまとまっていた。
Web Storage API - Web API | MDN
Web Storageはキーバリューのオブジェクトで２種類の仕組みを持つ。
SessionStorage
・セッション中に使用可能。オリジンごとに保存領域は分割されている。
= 同一オリジンのブラウザを全て閉じるまでデータが保存される。
・ストレージ制限は5MB
LocalStorage
・ブラウザを閉じてもデータは持続し、有効期限はない。
・ブラウザキャッシュをクリアすると消える。
・ストレージ制限は3つ
Cookie
・サーバーとデータをやり取り(セッション管理/ パーソナラライゼーション / トラッキング)する用途で使われる。
・制限は 4096bytes/domain 50cookies/domain(最大でも3000cookies)。
※ 制限に関しては情報が古いかもしれない。しかしてそう変わる技術でもないのかもしれない。
IndexedDB
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API
・キーバリューのオブジェクト
・WebStorageよりも多くのデータを保存したい場合に有用。
IndexedDBよりもっとシンプルな使い勝手なのでこちらも検討してねと紹介されていたリストもあったのだが、(localForage / dexie.js / ZangoDB など)ECサイトでもつくる場合を除いてそんなに必要になるケースはないと思うので、この情報は頭の片隅に配置する。
Web SQL
https://www.w3.org/TR/webdatabase/
なんだこの公式ドキュメントは。読みにくいことこの上ないぞ。
と思ったらそれもそのはず、Web SQLは非推奨のようだ。
