ホームページ > 記事 > ウェブフロントエンド > HTML5 ローカルストレージに関する関連説明

HTML5 ローカルストレージに関する関連説明

jackloveオリジナル: 2018-06-11 16:59:301660ブラウズ

編集者の推奨: この記事は Hacker Magazine からのもので、HTML5 を学習している開発者にとって、非常に包括的な紹介と分析が提供されています。
歴史 HTML5 ローカルストレージが登場する前は、クライアントに永続的なデータを保存したい場合、

HTTP cookie といういくつかのオプションがありました。 HTTP Cookie の欠点は明らかで、保存できるデータは 4KB までしかなく、各 HTTP リクエストは (SSL を使用しない限り) クリアテキストでサーバーに送信されます。
IE userData。 userData は、1990 年代のブラウザ戦争中に Microsoft が立ち上げたローカルストレージソリューションで、DHTML の動作属性を使用して、各ページに最大 64K のデータを保存し、各サイトに最大 640K のデータを保存できます。 userData の欠点は明らかです。これは Web 標準の一部ではないため、アプリケーションが IE のみをサポートする必要がある場合を除き、ほとんど役に立ちません。
フラッシュクッキー。 Flash Cookie の名前は少し誤解を招きますが、実際には「Flash ローカルストレージ」と呼ぶべきかもしれません。Flash Cookie では、デフォルトで 100K を超えるデータを保存できません。それを超えると、Flash は自動的にユーザーに追加のストレージ容量を要求します。Flash の ExternalInterface インターフェイスを利用すると、JavaScript を通じて Flash のローカルストレージを簡単に操作できます。 Flash の問題は、それが Flash であるというだけです。
Google Gears。 Gears は、Google が 2007 年にリリースしたオープンソースのブラウザプラグインで、主要なブラウザの互換性を向上させることを目的としており、SQLite に基づく組み込み SQL データベースを備えており、ユーザーを取得した後にデータベースにアクセスするための統合 API を提供します。 Gears の問題は、Google 自体がそれを使用しなくなったことです。

現状私たちが通常 HTML5 ローカルストレージと呼んでいるものは、一般的に Web を指しますストレージ仕様、この標準はかつて HTML5 仕様の一部でしたが、後にさまざまな理由により HTML5 仕様から分離されました。しかし、Web Storage に加えて、HTML5 のローカルストレージ標準には Web SQL Database と IndexedDB という 2 つの競合他社があります。 3つの仕様を順番に見ていきましょう。
Web ストレージWeb ストレージは、現在最も広くサポートされている HTML5 ローカルストレージ仕様です: IE 8 以降、FF 3.5 以降、Safari 4 以降、Chrome 4 以降、Opera 10.5 以降、iPhone 2 以降、Android 2 以降。 Web ストレージがすでにサポートされているかどうかを確認するには、次の関数を使用できます:

function supports_html5_storage() {  
    try {  
        return &#39;localStorage&#39; in window && window[&#39;localStorage&#39;] !== null;  
    } catch (e) {  
        return false;  
    }  
}

HTML5 ストレージの使い方は非常に簡単です。

コード

var foo = localStorage.getItem("bar");  
// ...  
localStorage.setItem("bar", foo);

你也可以写成下面这样：

代码

var foo = localStorage["bar"];  
// ...  
localStorage["bar"] = foo;

如果要将某个key从存储空间删除，可以调用removeItem：

代码

localStorage.removeItem(
&#39;foo&#39;
);

你也可以像遍历数组那样遍历存储的所有键值对象：

代码

for(var i=0; ivar key = localStorage.key(i);  
    console.log(key + ":" + localStorage[key]);  
}

如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：

代码

window.addEventListener(&#39;storage&#39;, function(e) {  
    console.log(e.key + "&#39;s value is changed from &#39;" +  
        e.oldValue + "&#39; to &#39;" + e.newValue + "&#39; by " + e.url);  
}, false);  
//A页面  
localStorage[&#39;foo&#39;] = &#39;bar&#39;;  
//B页面  
localStorage[&#39;foo&#39;] = &#39;newBar&#39;;

这时你应该会在A页面的Console中看到：
foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html
要注意的是，storage事件仅仅只是通知你某个键对应的值已经发生了改变，你没有办法在回调中阻止这个改变发生。
HTML5 Storage看起来不错，那它有没什么缺点呢？好问题。要说HTML5 Storage的缺点，唯一的问题就是它默认的QUOTA只有5MB，并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开浏览器的设置，并手动修改QUOTA的大小，如果超出了5MB的限制，你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。
Web SQL DatabaseWeb SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其他浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。
Web SQL Database就像它的名字那样，就是一个让你可以在Web上直接使用的SQL数据库，你要做的就是打开数据库，然后执行SQL，和你对Mysql做的事情没什么两样：

代码

openDatabase(&#39;documents&#39;, &#39;1.0&#39;, &#39;Local document storage&#39;, 5*1024*1024,  
function (db) {  
    db.changeVersion(&#39;&#39;, &#39;1.0&#39;, function (t) {  
        t.executeSql(&#39;CREATE TABLE docids (id, name)&#39;);  
    }, error);  
});

关于Web SQL Database的更多介绍，可以参看这篇指南。
但是它的缺点也同样明显。最大的问题就出在SQL上，实际上并不存在一种叫做SQL的标准结构化查询语言，我们平常使用的实际上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL（尽管有一个叫做SQL-92的规范，但它基本形同虚设），更进一步，甚至都不存在SQLite SQL，我们使用的实际上是SQLite x.y.z SQL，而这也就是Web SQL Database最大的问题，它无法统一各个浏览器厂商实现的SQL语言，如果你的某条Web SQL查询只能在Chrome上运行，这还能叫做标准吗？
所以，如果你现在访问Web SQL Database的规范页面，你会在顶部看到这样一则声明：
这个规范已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化，所以除非有厂商愿意独立实现这个规范，否则当前的SQL规范只能采用SQLite的SQL方言，而作为一个标准，这是不可接受的。
IndexedDB最后我们要介绍的就是IndexedDB了，相比其他两个规范，目前只有Firefox实现了IndexedDB（顺便提一下，Mozilla表示它们永远不会去实现Web SQL Database），不过Google已经表示正在考虑在Chrome中加入IndexDB支持。
IndexedDB引入了一个object store的概念，这有点像是一个SQL Database，你可以在“数据库”中存储“记录”，并且每条“记录”可以拥有很多“字段"，每个字段都有一个特定的数据类型，你可以选择记录的子集，并使用“光标”进行遍历，同时object store中的所有变更都是基于“事务”的。
下面让我们来看一个小例子：

代码

var request = window.indexedDB.open("CandyDB",  
                                    "My candy store database");  
request.onsuccess = function(event) {  
  var db = event.result;  
  if (db.version != "1") {  
    // User&#39;s first visit, initialize database.  
    var createdObjectStoreCount = 0;  
    var objectStores = [  
      { name: "kids", keyPath: "id", autoIncrement: true },  
      { name: "candy", keyPath: "id", autoIncrement: true },  
      { name: "candySales", keyPath: "", autoIncrement: true }  
    ];  
    function objectStoreCreated(event) {  
      if (++createdObjectStoreCount == objectStores.length) {  
        db.setVersion("1").onsuccess = function(event) {  
          loadData(db);  
        };  
      }  
    }  
    for (var index = 0; index < objectStores.length; index++) {  
      var params = objectStores[index];  
      request = db.createObjectStore(params.name, params.keyPath,  
                                     params.autoIncrement);  
      request.onsuccess = objectStoreCreated;  
    }  
  }  
  else {  
    // User has been here before, no initialization required.  
    loadData(db);  
  }  
};

关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。

本文讲解了关于HTML5本地存储的相关内容，更多相关内容请关注php中文网。

HTML5 ローカル ストレージに関する関連説明

関連記事

HTML5 ローカルストレージに関する関連説明