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

以下もご興味があるかもしれません: