HTML API

localstorageのブラウザAPIには、localStorageとsessionStorageの2つがあり、windowオブジェクト内に存在します。localStorageはwindow.localStorageに対応し、sessionStorageはwindow.sessionStorageに対応します。

localStorageとsessionStorageの違いは、主にその生存期間にあります。

基本的な使用方法

  • ここでいうスコープのは、異なるページ間のlocalStorageをどのように隔離するかということです（百度のページで腾讯のlocalStorageを読み取れるわけがないですよね、ははは）。

  • localStorage同じプロトコル、同じホスト名、同じポートであれば、同じlocalStorageデータを読み取り/変更できます。

  • sessionStorage比localStorageさらに厳密に言うと、プロトコル、ホスト名、ポートに加えて、同じウィンドウ（つまりブラウザのタブ）内である必要があります。

生存期間

localStorage理論的には永久に有効であり、つまり自分からクリアしない限り消えることはありません。保存したデータがブラウザの規定サイズを超えたとしても、古いデータを消去するのではなく、エラーを報告するだけです。ただし注意が必要なのは、モバイルデバイスのブラウザや、各種Native App使用されるWebView中では、localStorageどれも信頼性が低く、さまざまな理由（例えばAppの終了、ネットワークの切り替え、メモリ不足など）によってクリアされてしまう可能性があります。
sessionStorageの生存期間は、名前の通り、類似しており、sessionブラウザ（ブラウザのタブも含む）を閉じるだけでクリアされます。sessionStorageその生存期間が短すぎるため、適用シーンは非常に限られますが、別の面から見ると、異常が発生しにくく、比較的信頼できます。

データ構造

localstorageは標準的なキーバリューペア（Key-Value、略してKV）データ型であり、シンプルですが拡張も容易です。保存したいオブジェクトを何らかのエンコード方式で文字列に変換するだけで、簡単に対応できます。例えば、オブジェクトをJSON文字列に変換すればオブジェクトを保存できますし、画像をDataUrl（base64）に変換すれば画像を保存できます。また、キーバリューペアのデータ型にとって、「キーが一意である」という特性も非常に重要であり、同じキーで繰り返し代入すると、前回の値を上書きします。

有効期限

残念ながら、localstorageはネイティブでは有効期限の設定をサポートしていません。設定したい場合は、自分でロジックをカプセル化して実装するしかありません。

function set(key,value){ var curtime = new Date().getTime();//現在時刻を取得する localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//JSON文字列シリアライズに変換する } function get(key,exp)//expは設定した有効期限 { var val = localStorage.getItem(key);//保存された要素を取得する var dataobj = JSON.parse(val);//JSONオブジェクトを解析して取り出す if(new Date().getTime() - dataobj.time > exp)//現在時刻から保存された要素の作成時に設定した時間を引いた値が有効期限より大きい場合 { console.log("expires");//期限切れを通知する } else{ console.log("val="+dataobj.val); } }

容量制限

現在、業界では基本的に5Mに統一されています。すでにcookiesの4Kよりはるかに大きいので、節約して使おうぜ、少年。

ドメイン制限

ブラウザのセキュリティポリシーにより、localstorageはクロスドメインができません。また、サブドメインが親ドメインのlocalstorageデータを継承することもできません。この点はcookiesとの違いがかなり大きいです。

例外処理

localstorageは現在のブラウザ環境ではまだ完全に安定しているとは言えず、さまざまなバグが発生する可能性があるため、必ず例外処理を考慮しておく必要があります。個人的には、localstorageはリソースをローカルに保存するための最適化手段に過ぎないと考えています。localstorageを使用したことでプログラムの可用性が低下してはなりません。consoleにエラー情報を出力するだけの例外処理には絶対に反対です。localstorageの例外処理は通常、try/catchを使用して例外をキャッチ/処理します。

ユーザーの現在のブラウザがlocalstorageをサポートしているかどうかをテストする方法

現在、一般的に行われている方法は、window.localStorage存在するかどうかを確認することです。しかし、一部のブラウザにはバグがあり、「サポート」しているにもかかわらず、実際にはsetItem()すらできないという初歩的なバグが発生することさえあります。そのため、私はtry/catch構造内でset/get1つのテストデータに異常が発生するかどうかによって、そのブラウザがlocalstorageをサポートしているかどうかを判断することをお勧めします。もちろん、テストが終わったらテストデータを削除するのを忘れないでください。

ブラウザ互換性

Feature Chrome Firefox Internet Explorer Opera Safari Android Opera Mobile Safari Mobile
localStorage 4 3.5 8 10.50 4 2.1 11 iOS 3.2
sessionStorage 5 2 8 10.50 4 2.1 11 iOS 3.2

デバッグ方法

ChromeデベロッパーツールのResources - Local StorageパネルおよびResources - Session Storageパネルで、現在のドメインのlocalstorageデータを確認できます。

iOSデバイスではsetItem()を繰り返し実行できない

また、iPhone/iPadではsetItem()実行時に奇妙なQUOTA_EXCEEDED_ERRエラーが発生することがあります。この場合は通常、setItem()の前にremoveItem()を実行すればOKです。

関連プラグインの紹介

参考記事

原文リンク：https://segmentfault.com/a/1190000004121465