Web Storage APIの使用に関する簡単な説明

Web Storage APIの使用に関する簡単な説明

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 は、EventTarget、AnimationFrameProvider、GlobalEventHandlers、WindowEventHandlers、WindowLocalStorage、WindowOrWorkerGlobalScope、WindowSessionStorage を拡張します。

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 の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Javascript で SessionStorage と LocalStorage を使用する方法
  • JavaScript で localStorage を使用する方法
  • localStorage ストレージ情報に基づく Vue のコード例
  • Vueはパンくずリストを実装するためにローカルストレージを使用する
  • JS+HTML5 ローカルストレージ 登録、ログイン、検証機能を実装するためのローカルストレージの例
  • vuex を使用してユーザー情報を localStorage に保存する例
  • JavaScript 学習チュートリアル: クッキーとウェブストレージ
  • vue で localStorage を使用する方法の詳細な説明
  • Vueインターフェースの更新データがクリアされるlocalStorageの使用法の詳細な説明
  • HTML5 WebStorage (HTML5 ローカル ストレージ テクノロジー)

<<:  LNMP と phpMyAdmin を Docker にデプロイする方法

>>:  MySQL 8.0.15 インストール グラフィック チュートリアルとデータベースの基礎

推薦する

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

Docker コンテナのカスタム ホストのネットワーク アクセス操作

docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...

Idea で Tomcat のソースコードデバッグを開始し、デバッグのために Tomcat に入る方法

idea 開発ツールを使用してコードをデバッグする場合、Java Web プロジェクトで、Web コ...

Nginxを使ってサーバー内で複数コンテナの共存を実現する方法

背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

この記事はJavaScriptの変数とデータ型を理解するのに役立ちます

目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...

JavaScript Sandboxについての簡単な説明

序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...

ウェブデザイナーが持つべき資質と能力

Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...

IOSデータベースアップグレードデータ移行の詳細な例

IOSデータベースアップグレードデータ移行の詳細な例まとめ:昔、データベースのバージョン アップグレ...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

NodeJSのモジュール性に関する詳細な説明

目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...