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 以降でのみサポートされます。

2. ブラウザサポートの検出

 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;
   };

6. 最大クォータの処理
Web ストレージ。ほとんどのブラウザで許可されるサイズは 5MB を超えません。データを保存するときにクォータ制限を超えないようにするために、QUOTA_EXCEEDED_ERR 例外をキャッチして処理するメソッドを使用できます。例:

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 サイトの他の関連記事を参照してください。