Web Storage APIは、ブラウザにデータを保存する方法を提供します。これは、非常に重要な2つのストレージメカニズムを定義します。セッションストレージとローカルストレージ、Webプラットフォームで利用可能な一連のストレージオプションの一部です。
前書き
Web Storage APIは、非常に重要な2つのストレージメカニズムを定義しています。セッションストレージそしてローカルストレージ。
これらは、Webプラットフォームで利用可能な一連のストレージオプションの一部であり、次のものが含まれます。
アプリケーションキャッシュは非推奨であり、Web SQLはFirefox、Edge、およびIEに実装されていません。
セッションストレージとローカルストレージはどちらも、データ用のプライベートエリアを提供します。保存したデータに他のウェブサイトからアクセスすることはできません。
セッションストレージは、ページセッションの間、そこに保存されているデータを維持します。複数のウィンドウまたはタブが同じサイトにアクセスする場合、それらには2つの異なるSessionStorageインスタンスがあります。
タブ/ウィンドウを閉じると、その特定のタブ/ウィンドウのセッションストレージがクリアされます。
セッションストレージは、同じサイトで発生するさまざまなプロセスを個別に処理するシナリオを可能にすることを目的としています。たとえば、すべてのセッションで共有されるCookieでは不可能なことです。
代わりに、ローカルストレージは、ユーザーまたはユーザーによって明示的に削除されるまでデータを保持します。自動的にクリーンアップされることはなく、サイトにアクセスするすべてのセッションで共有されます。
ローカルストレージとセッションストレージはどちらもプロトコル固有:を使用してページにアクセスしたときに保存されるデータhttp
ページが提供されている場合は利用できませんhttps
、 およびその逆。
Webストレージにはブラウザでのみアクセスできます。 Cookieのようにサーバーに送信されることはありません。
ストレージにアクセスする方法
ローカルストレージとセッションストレージの両方がで利用可能ですwindow
オブジェクトなので、を使用してそれらにアクセスできますsessionStorage
そしてlocalStorage
。
それらのプロパティとメソッドのセットは、同じオブジェクトを返すため、まったく同じです。ストレージオブジェクト。
ストレージオブジェクトには、単一のプロパティがあります。length
、これはそれに保存されているデータ項目の数です。
メソッド
setItem(key, value)
setItem()
ストレージにアイテムを追加します。文字列をキーとして受け入れ、文字列を値として受け入れます。
localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')
文字列以外の値を渡すと、文字列に変換されます。
localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"
getItem(key)
getItem()
これは、ストレージに使用されたキー文字列を使用して、ストレージから文字列値を取得する方法です。
localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'
removeItem(key)
removeItem()
で識別されるアイテムを削除しますkey
ストレージから、何も返さない(undefined
値):
localStorage.removeItem('id')
key(n)
保存するすべてのアイテムにはインデックス番号があります。
番号が連続しているように見える場合がありますので、初めて使用するとき
setItem()
、そのアイテムはを使用して参照できますkey(0)
、次のkey(1)
などですが、そうではありません。 MDNは、「キーの順序はユーザーエージェントによって定義されるため、それに依存しないでください」と述べています。
ストレージアイテムを指していない番号を参照すると、次のようになります。null
。
clear()
clear()
操作しているストレージオブジェクトからすべてを削除します。
localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0
ストレージサイズの制限
Storage APIを使用すると、Cookieを使用する場合よりもはるかに多くのデータを保存できます。
Webで使用可能なストレージの量は、ストレージの種類(ローカルまたはセッション)、ブラウザー、およびデバイスの種類によって異なる場合があります。 A研究html5rocks.comは、これらの制限を指摘しています。
デスクトップ
- Chrome、IE、Firefox:10MB
- Safari:ローカルストレージ用に5MB、無制限のセッションストレージ
モバイル
- Chrome、Firefox:10MB
- iOS SafariおよびWebView:ローカルストレージ用に5MB、5MBのiOS6およびiOS7でない限り、セッションストレージは無制限
- Androidブラウザ:2MBのローカルストレージ、無制限のセッションストレージ
割り当てを超えています
特に大量のデータを保存する場合は、クォータエラーを処理する必要があります。あなたはtry / catchでそうすることができます:
try {
localStorage.setItem('key', 'value')
} catch (domException) {
if (
['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
domException.name
)
) {
// handle quota limit exceeded error
}
}
開発者ツール
主要なブラウザのDevToolsはすべて、ローカルストレージとセッションストレージに保存されているデータを検査および操作するための優れたインターフェイスを提供します。
クロム
Firefox
サファリ
私の無料ダウンロードJavaScriptビギナーズハンドブック
その他のブラウザチュートリアル:
- HTML5で利用できるいくつかの便利なトリック
- CMSベースのWebサイトをオフラインで機能させる方法
- プログレッシブウェブアプリの完全ガイド
- Fetch API
- プッシュAPIガイド
- チャネルメッセージングAPI
- サービスワーカーのチュートリアル
- キャッシュAPIガイド
- 通知APIガイド
- IndexedDBに飛び込む
- セレクターAPI:querySelectorおよびquerySelectorAll
- 延期と非同期でJavaScriptを効率的にロードする
- ドキュメントオブジェクトモデル(DOM)
- Web Storage API:ローカルストレージとセッションストレージ
- HTTPCookieのしくみを学ぶ
- 履歴API
- WebP画像形式
- XMLHttpRequest(XHR)
- 詳細なSVGチュートリアル
- データURLとは
- Webプラットフォームを学ぶためのロードマップ
- CORS、クロスオリジンリソースシェアリング
- Webワーカー
- requestAnimationFrame()ガイド
- Doctypeとは何ですか
- DevToolsコンソールとコンソールAPIの操作
- 音声合成API
- プレーンJavaScriptでDOMreadyイベントを待つ方法
- DOM要素にクラスを追加する方法
- querySelectorAllからDOM要素をループする方法
- DOM要素からクラスを削除する方法
- DOM要素にクラスがあるかどうかを確認する方法
- DOMノード値を変更する方法
- querySelectorAllから返されたDOM要素のリストにクリックイベントを追加する方法
- WebRTC、リアルタイムWeb API
- JavaScriptで要素のスクロール位置を取得する方法
- DOM要素を置き換える方法
- 入力ファイルフィールドの画像のみを受け入れる方法
- なぜブラウザのプレビューバージョンを使用するのですか?
- Blobオブジェクト
- ファイルオブジェクト
- FileReaderオブジェクト
- FileListオブジェクト
- ArrayBuffer
- ArrayBufferView
- URLオブジェクト
- 型付き配列
- DataViewオブジェクト
- BroadcastChannel API
- Streams API
- FormDataオブジェクト
- ナビゲーターオブジェクト
- GeolocationAPIの使用方法
- getUserMedia()の使用方法
- ドラッグアンドドロップAPIの使用方法
- Webページのスクロールを操作する方法
- JavaScriptでのフォームの処理
- キーボードイベント
- マウスイベント
- タッチイベント
- DOM要素からすべての子を削除する方法
- バニラJavascriptを使用してHTML属性を作成する方法
- JavaScriptを使用してチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
- JavaScriptを使用してクリップボードにコピーする方法
- JavaScriptを使用してボタンを無効にする方法
- ブラウザでページを編集可能にする方法
- URLSearchParamsを使用してJavaScriptでクエリ文字列値を取得する方法
- ページからすべてのCSSを一度に削除する方法
- insertAdjacentHTMLの使用方法
- Safari、終了する前に警告する
- JavaScriptを使用してDOMに画像を追加する方法
- フォームをリセットする方法
- GoogleFontsの使い方