ブラウザ側でデータを保存する技術 – 果て無きC#への探求心

業務で必要だったので調査した結果をまとめた。

クォータクライアントと呼ばれる下記の４つの機能でブラウザにデータを保存することができる。asm.jsのキャッシュもあるらしいですがWebAssemblyに置き換わったので除外します。Web SQL Databaseとやらもありましたが、これも事実上廃止になりました。

いずれもブラウザ間では共有できず、ドメインが違うとアクセスできません。有効期限を設定しないとブラウザを閉じた段階で削除されるものが多いです。

クッキーには2種類あり、
ドメイン間で共有されないファーストパーティクッキーにIDなどのセッション情報とユーザー設定やテーマなどのパーソナライゼーションなどを保存
ドメイン間で共有されるサードパーティークッキーに閲覧データを保存
を行っています。

１つのサイトでの制限数	20個（個数を超えると保存できない。ブラウザによって上限が異なる）
１つのcookieの容量	4096バイト（超えた部分は削除）
有効期限	保存時に有効期限を設定（未設定の場合、ブラウザ終了時に削除）

JavascriptでもCookieを保存・取得できますが、セキュリティの観点から制限されていることがあるので、基本的にサーバサイドの言語で扱うことが多いはず。下記はC#でクッキーを操作するコードです。

Response.Cookies.Append("key", "value", new CookieOptions());

if(!Request.Cookies.TryGetValue("key", out var ret)) return NoContent();
if(ret == null) return NoContent();

TempDate属性を使うものアリです。これも中身はクッキーです。

[TempData]
public string Text {get;set;}

Cashe

一般的にはHTMLや画像データなどを一時保存しておいて再表示時に高速化するために使うもの。

キーとstring型の値のペアで構成されたデータ。

window.localStorage.
window.sessionStorage.

Cookieと違って全くセキュアではないのでパスワードや生体情報などのセッション情報は絶対に保存してはいけない。

データ型をシリアライズして使おうとするとコードがエグくなるので後述のIndexedDBを使った方がいい。非同期処理しか使えないので速度面からやっぱりIndexedDBを使った方がいい。

ブラウザ側のデータベースと言われているが、一般的な行と列で構成されたリレーショナルデータベースではなく、オブジェクト指向データベースである点に注意。詳細はIndexedDB の主な特徴と基本用語で確認

Web Storage APIと比較すると複雑なので、シンプルに使いたいなら下記リンク先の関連情報に便利なライブラリがあります。