ホームページ > 記事 > ウェブフロントエンド > HTML5 - Web Storage API の簡単な説明
1. 概要
Web ストレージは、クライアント側でデータを保存する方法です。 Cookieと比較すると、Web Storage は安全性が高く、文字列だけでなく、より多くの オブジェクトを保存できます。Web Storage は数 KB のデータしか保存できません。また、クライアントとサーバー間のデータ変換も減少し、帯域幅も減少します。 Web Storage の中核は、window オブジェクトの 2 つのサブオブジェクト、sessionStorage と localStorage です。データはこれら 2 つのオブジェクトを通じてキーと値のペアの形式で保存されます。両方のオブジェクトはストレージ
インターフェースを実装しており、同じ名前のプロパティとメソッドを持ち、同じ使用方法を持ちます。違いは、2 つの保存時間と共有範囲です。 sessionStorage データの保存時間は、それが保存されているブラウザ ウィンドウまたはタブの存在時間によって決まり、共有範囲はデータが生成されたブラウザ ウィンドウまたはタブ内のみです。
localStorage データの保存時間は、手動またはコードによって削除されない限り、同じ元の Web サイトのページ間で共有されます。
多くのブラウザは、ローカル
ファイル システム への sessionStorage アクセスをサポートしていないため、Web サーバー経由で使用する必要があります。 Web Storage の仕様ではあらゆる種類のデータの保存が許可されていますが、ほとんどのブラウザ実装では文字列テキスト データの保存が許可されていますが、Web Storage を
JSON テクノロジーと組み合わせて使用すると、非テキスト データを保存できます。 より高度なデータ ストレージ方法は、
indexes に基づくデータベース ストレージ用の Web SQL Database であり、SQL クエリ言語 SQLite を特徴としています。 Web SQL データベースは現在、Safari、Chrome、および Opera でのみサポートされています。最終仕様では、おそらくこのアプローチは採用されないでしょう。もう 1 つの方法は IndexedDB で、これは FireFox 4 以降でのみサポートされます。
function checkStorageSupport() { //sessionStorage if (window.sessionStorage) { alert('This browser supports sessionStorage'); } else { alert('This browser does NOT support sessionStorage'); } //localStorage if (window.localStorage) { alert('This browser supports localStorage'); } else { alert('This browser does NOT support localStorage'); } }3. ストレージインターフェース
interface Storage { //同源键值对的数目 readonly attribute unsigned long length; //通过索引获取键,索引从0开始 getter DOM String key (in unsigned long index); //通过键获取值,键若不存在,值将返回 null getter any getItem(in DOMString key); //存储键值对,若已存在同名键,则值将被覆盖。若用户关闭了浏览器存储或是已超 //过允许存储的最大值,都将产生QUOTA_EXCEEDED_ERR错误。 set ter creator void setItem(in DOMString key, in any data); //通过键删除值,不存在则什么也不做 delete r void removeItem(in DOMString key); //删除storage中所有键值对,若为空则什么也不做 void clear (); };4. データの読み取りと保存
//---------------方式一-------------- //存储数据 window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); //读取数据 alert(window.sessionStorage.getItem(‘myFirstKey’)); //---------------方式二-------------- //存储数据 window.sessionStorage.myFirstKey = ‘myFirstValue’; //读取数据 alert(window.sessionStorage.myFirstKey); //---------------方式三-------------- var varKey = sessionStorage.key(index); window.sessionStorage[varKey] = new Value;5. ストレージ
イベントページ、ブラウザウィンドウまたはタブ間の通信Web ワーカーは、保存されたイベントを通じて実行できます。同じオリジンのオブジェクトはストレージ イベントをリッスンできます。ストレージ イベント リスニング メソッドは次のとおりです。 window.addEventListener("storage", displayStorageEvent, true);
6.StorageEvent インターフェイス
ストレージ イベント オブジェクトは、StorageEvent インターフェイスを実装します。このインターフェイスの宣言は次のとおりです。
interface StorageEvent : Event { readonly attribute DOMString key; readonly attribute any oldValue; readonly attribute any newValue; readonly attribute DOMString url; //该方法提供了一个对发生storage事件对象的 引用 ,这个对象可以是 //sessionStorage或localStorage readonly attribute Storage storageArea; };
try { sessionStorage["name"] = "Tabatha"; } catch ( exception ) { if (exception == QUOTA_EXCEEDED_ERR) { // we should tell the user their quota has been exceeded. } }
以上がHTML5 - Web Storage API の簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。