localstorgeとsessionstorgeについてマスターが詳しく説明します

この記事は localstorage と seesionstorage に関するもので、困っている人は参考にしていただければ幸いです。 [上級チュートリアル: Html5 チュートリアル ]

sessionStorage プロパティを使用すると、セッション Storage オブジェクトにアクセスできます。これは localStorage に似ていますが、localStorage に保存されたデータには有効期限の設定がないのに対し、sessionStorage に保存されたデータはページ セッションが終了するとクリアされる点が異なります。ページ セッションはブラウザーが開いている間維持され、ページを再読み込みまたは復元すると、元のページ セッションが維持されます。新しいタブまたはウィンドウでページを開くと、新しいセッションが初期化されます。これは、セッション Cookie の動作方法とは異なります。

読み取り専用の localStorage を使用すると、ドキュメントのリモート (元の) オブジェクト ストレージにアクセスできます。データはクロスブラウザー セッションとして保存されます。 localStorage は sessionStorage に似ています。違いは、localStorage に保存されているデータは無期限であり、ページ セッションが終了すると、つまりページが閉じられると、sessionStorage に保存されているデータはクリアされることです。

簡単に言えば、localStorage はブラウザーの永続ストレージ ソリューションであり、sessionStorage は 1 つのページにのみ存在し、新しいページが開かれたときにリセットされるという点で sessionStorage とは異なります。データが localStorage に保存されるか sessionStorage に保存されるかは、ページのプロトコルに固有であることに注意してください。

基本的な使用方法

まず、sessionStorage の操作を見てみましょう

1. sessionStorage にデータを保存します sessionStorage.setItem('key', 'value');

2. sessionStorage からデータを取得します

var sessionData = sessionStorage.getItem('key');

#3. sessionStorage から保存したデータを削除します

sessionStorage.removeItem('key');

4. すべての削除

sessionStorage.clear();

同じ localStorage で同様の操作が行われます

##1。 データの取得

localStorage.setItem(`key`, `value`);

#。 ##3. 単一のデータを削除します

let cat = localStorage.getItem(`key`);

4. すべて削除します

localStorage.removeItem(`key`);

localStorage.length を通じて localStorage 内のキーと値のペアの数を取得でき、localStorage ストレージを横断することもできます。 localStorage.key() メソッドを通じて。

ストレージ イベント

保存されたデータが変更されると、ストレージ イベントがトリガーされます。ただし、キャプチャしてバブルアップするクリック イベントとは異なり、ストレージ イベントは通知に似ており、キャンセルできないことに注意してください。このイベントをトリガーすると、同じドメイン内の他のウィンドウのストレージ イベントが呼び出されますが、ストレージをトリガーするウィンドウ (つまり、現在のウィンドウ) はこのイベントをトリガーしません。ストレージのイベント オブジェクトの共通属性は次のとおりです (現在のウィンドウはトリガーされません。他のウィンドウがトリガーされます)。

changeEvent の共通プロパティは次のとおりです:

localStorage.clear();

以上がlocalstorgeとsessionstorgeについてマスターが詳しく説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。