Explications connexes sur le stockage local HTML5-Tutoriel H5-php.cn

Recommandation de l'éditeur : cet article provient de Hacker Magazine. Il fournit une introduction et une analyse très complète de la méthode de stockage du HTML5. Pour les développeurs qui apprennent le HTML5, c'est à ne pas manquer.
HistoriqueAvant le stockage local HTML5, si l'on voulait sauvegarder des données persistantes sur le client, il y avait plusieurs options :

Cookie HTTP. Les inconvénients des cookies HTTP sont évidents, ils ne peuvent stocker que jusqu'à 4 Ko de données et chaque requête HTTP sera renvoyée au serveur en texte clair (sauf si vous utilisez SSL).
Données utilisateur IE. userData est une solution de stockage local lancée par Microsoft lors de la guerre des navigateurs des années 1990. Elle utilise l'attribut behavior du DHTML pour stocker des données locales. Elle permet à chaque page de stocker jusqu'à 64 000 données et à chaque site de stocker jusqu'à 640 000 données. Les lacunes de userData sont évidentes. Cela ne fait pas partie des standards du Web, donc à moins que votre application n'ait besoin de prendre en charge IE, cela est de peu d'utilité.
Cookie Flash. Le nom du cookie Flash est un peu trompeur. Ce n'est en fait pas la même chose que le cookie HTTP. Peut-être que son nom devrait s'appeler "Le cookie Flash permet à chaque site de stocker pas plus de 100 Ko de données par défaut". s'il dépasse, Flash Il demandera automatiquement plus d'espace de stockage à l'utilisateur. Avec l'aide de l'interface ExternalInterface de Flash, vous pouvez facilement exploiter le stockage local de Flash via Javascript. Le problème avec Flash est simplement qu'il s'agit de Flash.
Google Gears. Gears est un plug-in de navigateur open source publié par Google en 2007, visant à améliorer la compatibilité des principaux navigateurs. Gears dispose d'une base de données SQL intégrée basée sur SQLite et fournit une API unifiée pour accéder à la base de données après avoir obtenu les utilisateurs. autorisation, chaque site peut stocker des données de n'importe quelle taille dans la base de données SQL. Le problème avec Gears est que Google lui-même ne l'utilise plus.

Situation actuelleCe que nous appelons habituellement le stockage local HTML5 fait désormais généralement référence au Web Spécification de stockage , cette norme faisait autrefois partie de la spécification HTML5, mais a ensuite été séparée de la spécification HTML5 pour diverses raisons. Mais en plus du stockage Web, il existe deux autres concurrents pour le standard de stockage local HTML5 : Web SQL Database et IndexedDB. Examinons tour à tour ces 3 spécifications.
Stockage WebLe stockage Web est actuellement la spécification de stockage local HTML5 la plus largement prise en charge : IE 8+, FF 3.5+, Safari 4+, Chrome 4+, Opera 10.5+, ainsi que l'iPhone 2+ et Android 2+ prennent déjà en charge le stockage Web Pour déterminer si votre navigateur prend en charge le stockage Web, vous pouvez utiliser la fonction suivante :

Code

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

Copier après la connexion

Le stockage HTML5 est très simple à utiliser :

Code

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

Copier après la connexion

你也可以写成下面这样：

代码

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

Copier après la connexion

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

代码

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

Copier après la connexion

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

代码

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

Copier après la connexion

如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册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;;

Copier après la connexion

这时你应该会在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);  
});

Copier après la connexion

关于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);  
  }  
};

Copier après la connexion

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

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