html5ローカルストレージストレージインスタンスの詳細説明

HTML5storage は、Web サイトが情報をコンピューター上にローカルに保存し、後で必要なときに取得する方法を提供します。この概念は cookie に似ていますが、より大容量のストレージ用に設計されている点が異なります。 Cookieのサイズには制限があり、新しいページをリクエストするたびにCookieが送信されます。 HTML5のストレージはあなたのコンピュータに保存されており、Webサイトはページが読み込まれた後にJavascriptを通じてこのデータを取得できます。

1、sessionStorage

検出

!!window.sessionStorage;

一般的な方法

.key = value
.setItem(key,value)
.getItem(key)
.removeItem(key)
.clear()

rree

イベント:

window.onstorage

価値のある変更の検出、ブラウザのサポートは良くありません。

注:

1. Cookie ストレージは 4K に制限されていますが、それに比べて、セッション ストレージの方が大きなストレージ容量を持っていますが、具体的なサイズについてはブラウザの実装によって異なります。

2. Cookieには、クライアントがサーバーにリクエストするたびにCookieをサーバーに送信するメカニズムがあります。これは、サーバーが毎回Cookieのすべての情報を必要とするわけではないため、間違いなく多くの不要な操作を行うことになります。セッション ストレージは、データを自動的に送信しないので、この問題をうまく解決します。これにより、不要な作業が軽減されます。

3. sessionStorage を通じて保存されたデータのライフサイクルは、ブラウザ (またはタブ) を閉じると存在しなくなります。ただし、sessionStorage は、ページを更新するか、「進む」または「戻る」ボタンを使用した後も存在します。

4. セッションストレージの各ウィンドウの値は独立しています(各ウィンドウは独自のデータを持っています)。ウィンドウを閉じるとそのデータは消え、ウィンドウ間でセッションストレージを共有することはできません。

5. setItemのキーと値は文字列の形式で保存されます。つまり、次のコードがある場合: setItem('count', 1); getItem('count') + 5 で得られる値は、期待される 6 (整数) ではなく、'16' (文字列) になります。 。

6. setItem を再度使用して既存のキーの値を設定すると、古い値が新しい値に置き換えられます。

7. ストレージ内のデータが変更されると、対応するイベント (window.onstorage) がトリガーされますが、現在のさまざまなブラウザーでのこのイベントのサポートは完全ではないため、当面は無視できます。

2、localStorage

Detection

メソッドはと同じです。 セッションストレージ

注:

ローカル ストレージは、クライアントが使用するサーバー上にデータのみを保存し、(意図的にそうしない限り) 送信されません。

1. そして、特定のドメインでは、ローカルストレージが共有されます（複数のウィンドウが「データベース」を共有します）。

2. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

举例

//结合JSON.stringify使用更强大    
var person = {'name': 'rainman', 'age': 24};    
localStorage.setItem("me", JSON.stringify(person));    
JSON.parse(localStorage.getItem('me')).name;    // 'rainman'    
    
/**  
* JSON.stringify，将JSON数据转化为字符串  
* JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'  
* JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'  
* JSON.parse，反解JSON.stringify  
* JSON.parse('["a","b","c"]')                    // ["a","b","c"]  
*/

3、Database Storage

对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

A、打开链接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
if(!db) { alert("Failed to connect to database."); }        // 检测连接是否创建成功

以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

B、执行查询

db.transaction( function(tx) {   
    tx.executeSql(  
     "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
     ['lebel', new Date().getTime()],   
      function(tx2, result){ alert('成功'); },   
          function(tx2, error){ alert('失败:' + error.message); }  
    );   
});

1. 执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。

2. 该函数具有一个类型事务的参数（tx）。

3. 该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
   表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。

4. 执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
   

5. 执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图
   

C、其它

• Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。

D、示例

  //创建数据库    
  var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);     
  if(!db){    
      alert("Failed to connect to database.");     
  } else {    
      alert("connect to database 'K'.");     
  }    
      
  // 创建表    
 db.transaction( function(tx) {     
     tx.executeSql(    
         "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",     
         [],     
         function(){ alert('创建users表成功'); },     
         function(tx, error){ alert('创建users表失败:' + error.message); }    
     );    
 });     
     
 // 插入数据    
 db.transaction(function(tx) {     
     tx.executeSql(    
         "INSERT INTO users (id, name) values(?, ?)",     
         [Math.random(), 'space'],     
         function(){ alert('插入数据成功'); },     
         function(tx, error){ alert('插入数据失败: ' + error.message);}    
     );     
 });     
     
 // 查询    
 db.transaction( function(tx) {     
     tx.executeSql(    
         "SELECT * FROM users", [],      
          function(tx, result) {    
             var rows = result.rows, length = rows.length, i=0;    
             for(i; i < length; i++) {     
                 alert(    
                     &#39;id=&#39; + rows.item(i)[&#39;id&#39;] +     
                     &#39;name=&#39;+ rows.item(i)[&#39;name&#39;]    
                 );     
             }     
         },     
         function(tx, error){    
             alert(&#39;Select Failed: &#39; + error.message);    
         }    
     );     
 });     
     
 // 删除表    
 db.transaction(function (tx) {      
     tx.executeSql(&#39;DROP TABLE users&#39;);     
 });

4、globalStorage

这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享

基本语法

• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。

• globalStorage['mozilla.org'] - mozilla.org ドメイン名の下にあるすべての Web ページは、この名前空間ストレージ オブジェクトを通じて読み書きできます。

• globalStorage['org'] - .org ドメイン名の下にあるすべての Web ページは、この名前空間ストレージ オブジェクトを通じて読み書きできます。

• globalStorage[''] - 任意のドメイン名の任意の Web ページは、この名前空間ストレージ オブジェクトを通じて読み書きできます

Method 属性

• setItem(key, value ) —— 設定またはキー値をリセットします。

• getItem(key) - キー値を取得します。

• removeItem(key) - キー値を削除します。

• キー値を設定します: window.globalStorage["planabc.net"].key = value;

• キー値を取得します: value = window.globalStorage["planabc.net"].key;

その他

• 有効期限は localStorage と同じであり、他のいくつかの機能も localStorage と同様です。

• 現在、Firefox は現在のドメインでの globalStorage ストレージのみをサポートしています。パブリック ドメインを使用すると、「セキュリティ エラー」コード「1000」のようなエラーが発生します。

5、互換性

メソッド	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	2	8	10.50	4
セッションストレージ	5	2	8	10.50	4
グローバルストレージ	--	2	--	--	--

以上がhtml5ローカルストレージストレージインスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。