ブラウザにデータを保存する仕組みについて

昨日の記事で、Chrome 58がリリースされIndexedDB 2.0がサポートされたことを書いたので、ローカルストレージについてまとめてみました。

昨今のブラウザではローカルにデータを保存できるので、その機能を利用してサーバへのアクセスを軽減する実装をしたりします。
(従来からあるクッキーは、主なブラウザでサポートしている最大容量が4KBなので、簡易的な情報を保存する用途に限定されます)。

クッキーに変わる技術として主要なものとしては下記2つがあります。

※保存できる容量はブラウザにより異なりますが概ね5MB以上は保証されているようです

各ブラウザのサポート状況

ブラウザ 対応ブラウザのバージョン(記載以降) 左記ブラウザのサポート状況
IE 11
Edge 14
Firefox 51
Chrome 49
Safari 10
Opera 43
iOS Safari 10.2
Opera Mini ALL
Android Browser 4.4
Chrome for Android 57

各ストレージの特徴

Session Storage

有効期限 形式 備考
タブが閉じられるまで KVS タブが異なると違うStorageとして扱われる

Local Storage

有効期限 形式 備考
ブラウザに永続的に保存 KVS 複数タブにまたがってもアクセス可

Indexed DB

有効期限 形式 備考
ブラウザに永続的に保存 KVS インデックスやトランザクションが利用可