Webページでユーザデータを保存する方法

URL

URLに指定してデータを保存する。
URLの最大長問題があるため、最大で2,048文字(IEのURL最大文字数)までに抑えたほうが良さそう。
短縮URLと組み合わせると、URLの見栄えも良くなる。

クッキー(Cookie)

クッキーに保存する。
Webサーバの応答リクエストヘッダでクッキーを作成し、次回の要求リクエストヘッダに付加される。
JavaScriptからも追加・参照・削除ができる。

ログイン型のWebサイトなどで利用されている。

補足:Webページのリクエスト時、ヘッダーに自動付加されて送信されるため、EU一般データ保護規則(GDPR:General Data Protection Regulation)の個人情報保護に引っかかる。

WebStorage

ブラウザのストレージ機能に保存する。
ドメイン毎にキーバリュー方式で、最大5MBのデータを保存できる。
わりと古いバージョンから対応している。

サーバに送付する必要のない、ページの設定とかを格納しておくのに便利そう。

IndexedDB API

ブラウザのストレージ機能で、WebStorageより大量のデータを保存できる。

FileSystem API

ユーザのローカルストレージにアクセスして、保存する。
ユーザの認証が必要になる。

ある程度のブラウザが対応しているが、iOSのSafariは非対応。

参考

モダンブラウザのストレージ容量と調査方法まとめ - HTML5 Rocks