1. ブラウザのローカルストレージ技術ローカル ストレージ用の Cookie の最も初期の使用に加えて、最新のブラウザーは Web Storage API を使用してキー/値のストレージを容易にします。 Web ストレージには 2 つの保存方法があります。 1.1、セッションストレージアクセスソースごとに個別のストレージ領域が維持されます。ブラウザを閉じない限り、データは消えません。 したがって、この種類のストレージはセッション ストレージと呼ばれます。 ここでのセッションの意味は、サーバー側のセッションの意味とは異なることに注意してください。ここでの sessionStorage はローカル ストレージのみであり、サーバーにデータを転送しません。 sessionStorage のストレージ容量は、5MB に達することもある Cookie よりもはるかに大きいです。 1.2、ローカルストレージsessionStorage と同様に、データの保存にも使用されます。違いは、localStorage に保存されたデータはブラウザを閉じても消えないことです。 有効期限を設定したり、JavaScript を使用して手動で削除したり、ブラウザのキャッシュをクリアしたりすることで、localStorage をクリアできます。 これら 2 つのストレージ メソッドは、Window.sessionStorage と Window.localStorage を通じて使用されます。実際、Window の定義を見てみましょう。
Window は WindowLocalStorage と WindowSessionStorage を継承するため、SessionStorage と LocalStorage を Window から直接取得できます。 各オリジンに対して、Window.sessionStorage と Window.localStorage はデータを読み取るための新しい Storage オブジェクトを作成します。 2. Webストレージ関連のインターフェースWeb ストレージに関連するインターフェースは 3 つあります。 1 つ目は、先ほど述べたウィンドウです。ウィンドウを通じて sessionStorage と localStorage を取得できます。 2 番目は Storage オブジェクトです。取得された Storage オブジェクトは両方とも Storage オブジェクトです。 インターフェースストレージ{ 読み取り専用長さ: 数値; クリア(): void; getItem(キー: 文字列): 文字列 | null; キー(インデックス: 数値): 文字列 | null; アイテムを削除します(キー: 文字列): void; setItem(キー: 文字列、値: 文字列): void; [名前: 文字列]: 任意; } Storage オブジェクトには、データにアクセスするための便利なメソッドが多数用意されていることがわかります。 3 番目は StorageEvent で、ストレージが変更を検出したときに StorageEvent イベントをトリガーします。 3. ブラウザの互換性2 つの画像を使用して、異なるブラウザでのこれら 2 つのストレージの互換性を確認してみましょう。 ウィンドウ.localStorage: ウィンドウ.セッションストレージ: ご覧のとおり、最新のブラウザは基本的にこれら 2 つのストレージ機能をサポートしています。 Internet Explorer 6、7 などの古いブラウザや、リストされていない他のブラウザを使用している場合は、ブラウザでストレージが効果的にサポートされているかどうかを検出する必要があります。 テストのやり方を見てみましょう: 関数 storageAvailable(type) { var ストレージ; 試す { ストレージ = ウィンドウ[タイプ]; var x = '__storage_test__'; ストレージ.setItem(x, x); ストレージ.removeItem(x); true を返します。 } キャッチ(e) { DOMExceptionのインスタンスを返す && ( // Firefox 以外のすべて e.code === 22 || //ファイアフォックス e.コード === 1014 || // コードが存在しない可能性があるため、名前フィールドもテストします // Firefox 以外のすべて e.name === 'QuotaExceededError' || //ファイアフォックス e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && // すでに何かが保存されている場合にのみ、QuotaExceededError を認識します (ストレージ && ストレージ長さ !== 0); } } 型は localStorage または sessionStorage であり、有効な Storge オブジェクトがあるかどうかを判断するために例外をキャッチします。 どのように使うか見てみましょう: ストレージが利用可能である場合('localStorage') { // やったー!localStorageのすばらしさが使えるようになりました } それ以外 { // 残念ですが、localStorage はありません } 4. シークレットモード最近のブラウザのほとんどは、閲覧履歴や Cookie などのデータ プライバシー オプションが保存されないシークレット モードをサポートしています。 したがって、これは Web ストレージと互換性がありません。では、この問題をどう解決すればよいのでしょうか? ブラウザによって使用するソリューションが異なる場合があります。 たとえば、Safari では、シークレット モードで Web ストレージを使用できますが、何も保存されません。 一部のブラウザでは、ブラウザを閉じるときに以前のストレージをすべて消去することを選択します。 したがって、開発プロセスでは、さまざまなブラウザの異なる処理方法に注意する必要があります。 5. WebストレージAPIの使用Storage オブジェクトの場合、通常のオブジェクトと同様にオブジェクト内のプロパティに直接アクセスすることも、Storage.getItem() および Storage.setItem() を使用してプロパティにアクセスして設定することもできます。 Storageオブジェクト内のキー値はすべて文字列型であることに注意してください。整数を入力した場合でも、文字列に変換されます。 次の例はすべて colorSetting プロパティを設定できます。 ローカルストレージの色設定 = '#a4509b'; ローカルストレージ['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); これら 3 つの方法はすべてストレージ機能とアクセス機能を実現できますが、setItem、getItem、removeItem、key、length などの Web Storage API を使用することをお勧めします。 Storage に値を設定するだけでなく、StorageEvent をトリガーしてリッスンすることもできます。 StorageEvent の定義を見てみましょう。 インターフェースStorageEventはEventを拡張します{ 読み取り専用キー: 文字列 | null; 読み取り専用の新しい値: 文字列 | null; 読み取り専用 oldValue: 文字列 | null; 読み取り専用ストレージ領域: ストレージ | null; 読み取り専用 URL: 文字列; } Storage オブジェクトが変更を送信するたびに、StorageEvent イベントがトリガーされます。 sessionStorage が変更された場合はトリガーされないことに注意してください。 ドメイン内のページでストレージが変更されると、ドメイン内の他のページでもその変更が監視されます。もちろん、他のドメインの場合、この StorageEvent を監視することはできません。 以下に示すように、window の addEventListener メソッドを通じてストレージ イベントを追加できます。 window.addEventListener('storage', 関数(e) { document.querySelector('.my-key').textContent = e.key; document.querySelector('.my-old').textContent = e.oldValue; document.querySelector('.my-new').textContent = e.newValue; document.querySelector('.my-url').textContent = e.url; document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea); }); 上記の例では、StorageEvent からキー、oldValue、newValue、url、および Storage オブジェクトを取得します。 上記は、Web Storage API の使用方法の詳細についての簡単な説明です。Web Storage API の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: LNMP と phpMyAdmin を Docker にデプロイする方法
>>: MySQL 8.0.15 インストール グラフィック チュートリアルとデータベースの基礎
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...
idea 開発ツールを使用してコードをデバッグする場合、Java Web プロジェクトで、Web コ...
背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...
この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...
目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...
序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...
Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...
IOSデータベースアップグレードデータ移行の詳細な例まとめ:昔、データベースのバージョン アップグレ...
目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...
目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...
InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...
目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...
最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...