HTML5 上級チュートリアル - Web ストレージ

はじめに

HTML5 Web Storage の保存方法には、localStorage と sessionStorage の 2 つがあります。

どちらの方法でも、キーと値のペアを通じてデータが保存されるため、アクセスが簡単で、ウェブサイトのパフォーマンスには影響しません。使用方法は同じですが、保存期間が異なります。
LocalStorage データはローカル ハードウェアに保存され、API を手動で呼び出してデータを消去できます。 sessionStorage はセッション オブジェクトに保存され、ブラウザを閉じるとクリアされます。

Web ストレージのサイズはブラウザごとに制限されており、主流のブラウザではサイズは約 5M ですが、実際には通常のデータを保存するには十分です。

使用法

localStorageを例にとると、sessionStorageの使用法は同じです:

setItem

データの保存: localStorage.setItem(key, value);

例:

localStorage.setItem('name','Hello World');

キーが同じ場合、前のデータを変更するために値が上書きされます。 value がオブジェクトの場合、json 文字列に変換する必要があります。それ以外の場合、読み取る内容は [object Object]

getItem

Read data: localStorage.getItem(key);

例:

localStorage.getItem('name');       // Hello World

removeItem

削除単一データ: localStorage.removeItem(key);

例:

localStorage.removeItem('name');
localStorage.getItem('name');       // null

キー名のデータを削除した後、loaclStorageはデータを取得できないためnullが返されます;

clear

全データ削除: localStorage.clear();

例:

localStorage.clear();

この時点で、localStorage 内のすべてのデータが削除されます。

key

特定のindexのキーを取得します: localStorage.key(index);
例:

localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1);                // name2

インデックス1、つまりname2のキーを取得します。

コンストラクター

実際のプロジェクトでは、localStorage を複数回操作する必要がある場合があります。コンストラクターを使用すると、より適切に操作できます。

例:

var localEvent = function (item) {
    this.get = function () {
        return localStorage.getItem(item);
    }
    this.set = function (val) {
        localStorage.setItem(item, val);
    }
    this.remove = function () {
        localStorage.removeItem(item);
    }
    this.clear = function () {
        localStorage.clear();
    }
}

// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');

local1.set('Hello World');
local2.set('Hello Linxin');

local1.get();               // Hello World
local2.get();               // Hello Linxin

これは単なる単純なデモンストレーションです。通常、プロジェクトにオブジェクトを保存する場合、コード内で何らかの処理を行う必要があります。

ストレージ イベントをリッスンする

ウィンドウ オブジェクトのストレージ イベントをリッスンし、その イベント処理関数を指定できます。localStorage または sessionStorage がページ内で変更されると、対応する処理関数がトリガーされます。

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})

イベントをトリガーする時間オブジェクト (e パラメーター値) には、いくつかの 属性:

• key: キー値があります。

• oldValue: 変更前の値。

• newValue: 変更された値。

• url: ページの URL。

• storageArea : 変更されたストレージ オブジェクト。

注: Google Chrome では、このイベントをトリガーするには、別のタブでストレージを変更する必要があります。つまり、Web ページ A がこのイベントをリッスンし、Web ページ B で localStorage が変更されると、Web ページ A がイベント機能。ただし、IE では、同じ Web ページ上の localStorage を変更すると、このイベントがトリガーされます。

デバッグ

Google Chrome に付属のデバッグ ツール (chrome devtools) は非常に使いやすく、localStorage と sessionStorage のデバッグに使用できます。ブラウザを開き、f12 キーを押してデバッグ ツールを表示します。クリックして開くと、左側の列に、localStorage、sessionStorage、IndexedDB などのストレージが表示されます。対象とする Web サイトのドメイン名を選択します。デバッグすると、右側に対応するキーと値が表示され、右クリックして編集または削除できます。

互換性があります

IE8 以降と互換性がありますが、特別であり、サーバー上でファイルを開く必要がある場合にのみサポートされます。ファイルを開くために file:// を直接ダブルクリックすることは互換性がありません。

file:// で開くことをサポートしているのは IE11 のみです。他のブラウザーは、携帯電話での互換性を含め、高度なサポートを備えています。

【関連おすすめ】

1. 無料のh5オンラインビデオチュートリアル

2. php.cnオリジナルのhtml5ビデオチュートリアル

以上がHTML5 上級チュートリアル - Web ストレージの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。