Webページでユーザデータを保存する方法
URL
URLに指定してデータを保存する。
URLの最大長問題があるため、最大で2,048文字(IEのURL最大文字数)までに抑えたほうが良さそう。
短縮URLと組み合わせると、URLの見栄えも良くなる。
例
- GitHub - nwtgck/nipp: 🎒 Portable Programmable Text Convertor Hosted on URL: https://nwtgck.github.io/nipp
- 極小Webアプリ - URLにJavaScriptを保持してWebアプリとして実行できる
クッキー(Cookie)
クッキーに保存する。
Webサーバの応答リクエストヘッダでクッキーを作成し、次回の要求リクエストヘッダに付加される。
JavaScriptからも追加・参照・削除ができる。
ログイン型のWebサイトなどで利用されている。
補足:Webページのリクエスト時、ヘッダーに自動付加されて送信されるため、EU一般データ保護規則(GDPR:General Data Protection Regulation)の個人情報保護に引っかかる。
WebStorage
ブラウザのストレージ機能に保存する。
ドメイン毎にキーバリュー方式で、最大5MBのデータを保存できる。
わりと古いバージョンから対応している。
サーバに送付する必要のない、ページの設定とかを格納しておくのに便利そう。
IndexedDB API
ブラウザのストレージ機能で、WebStorageより大量のデータを保存できる。
FileSystem API
ユーザのローカルストレージにアクセスして、保存する。
ユーザの認証が必要になる。
ある程度のブラウザが対応しているが、iOSのSafariは非対応。