Résumé des méthodes de stockage HTML5

Cet article partage principalement avec vous un résumé des méthodes de stockage HTML5. J'espère qu'il pourra aider les développeurs HTML5 et aider tout le monde à mieux maîtriser les méthodes de stockage HTML5.

1. La croissance sauvage des cookies

2. Stockage local stockage local

3. Séance de stockage local

4. Cache hors ligne (cache d'application)

5. Web SQL

6. IndexedDB

La croissance barbare des cookies

Avant l'apparition de HTML5, Cookies occupait tout le monde du stockage client, tout comme la croissance barbare de l'ère barbare, cookies très bien et répondre rapidement aux besoins des applications pratiques. Mais ses problèmes sont également évidents. cookies transportera des données dans l'en-tête de la requête, et la taille est limitée à 4K. C'est très dangereux, facile à intercepter par l'extérieur, et il y a aussi domain pollution.

IE Le navigateur aime particulièrement jouer avec. Il a ajouté UserData pour augmenter la capacité de stockage et la taille est 64K Cependant, les autres navigateurs n'aiment pas jouer avec, donc il. est le seul. Une famille soutient.

Ensuite, voici le point important. Puisque cookies il y a tellement de problèmes, nous devons trouver des moyens de les résoudre, sinon nous ne pourrons pas avancer. Identifiez d’abord ses problèmes, puis trouvez des solutions basées sur ces problèmes.

• Résoudre le 4K problème de capacité de stockage

• Résoudre le problème des en-têtes de requête avec les informations de stockage, c'est-à-dire augmenter la sécurité via des canaux cryptés ou méthode de stockage et de transmission de données

• Résoudre le problème du stockage relationnel

• Cross-browser

Stockage local localstorage

Méthode de stockage

Stocké sous forme de paires clé-valeur, stocké en permanence et jamais invalidé sauf suppression manuelle.

Capacité de stockage

par nom de domaine5M.

API couramment utilisées

getItem //Obtenir des enregistrements

setItem //Définir des enregistrements

removeItem //Supprimer l'enregistrement

key //Obtenir la valeur correspondant à key

clear //Effacer l'enregistrement

Séance de stockage local

et HTML5 dans le stockage local API de 🎜>localstorage sont les mêmes. La différence est que sessionstorage sera effacé après la fermeture de la page, tandis que sessionstorage sera toujours enregistré. . Sauf suppression manuelle. localstorageCache hors ligne (cache d'application)

Cache local des fichiers requis par l'application

Utilisation

Configuration Fichier

manifest Sur la page :

nbsp;HTML>

...

Fichier : manifest

est le fichier texte le plus simple qui informe la navigation Qu'est-ce que mis en cache par le serveur (et ce qui n'est pas mis en cache).

manifest

Le fichier est divisé en trois parties : manifest

1. - Les fichiers répertoriés sous cette rubrique seront téléchargés après le premier Mise en cache

   CACHE MANIFEST

2. - Les fichiers sous ce titre nécessitent une connexion au serveur et ne seront pas mis en cache

   NETWOrK

3. - Documents sous cette rubrique précise la page de secours lorsque la page n'est pas accessible (comme la page

   ) FALLBACK404

Complète

demo

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

Sur le serveur : le fichier

doit être configuré avec le bon , c'est-à-dire manifest. MIME-typetext/cache-manifest

Couramment utilisé

APILe noyau est l'objet

, qui possède un attribut

indiquant l'état actuel du cache de l'application : applicationCachestatus

: Pas de cache, pas de cache application lié à la page

0 （UNCACHED）

: Inactif, le cache application n'a pas été mis à jour

1 （IDLE）

: Vérification, téléchargement le fichier de description et vérification des mises à jour

2 （CHECKING）

 : Téléchargement, le cache de l'application télécharge les ressources spécifiées dans le fichier de description

3 （DOWNLOADING）

 : Mise à jour terminée, toutes les ressources ont été téléchargées

4 （UPDATEREADY）

: Abandonné, le fichier de description du cache de l'application n'existe plus, la page ne peut donc plus accéder au cache de l'application

5 （IDLE）

Événements associés

indiquer les changements dans l'état du cache de l'application :

 : se déclenche lorsque le navigateur recherche des mises à jour pour le cache de l'application

checking

 : se déclenche lorsqu'une erreur se produit lors de la vérification des mises à jour ou téléchargement d'une ressource

error

 : Déclenché lors de la vérification du fichier de description et de la constatation que le fichier n'a aucune modification

noupdate

 : Déclenché lors du démarrage du téléchargement des ressources du cache de l'application

downloading

 : Téléchargement continu pendant le processus de téléchargement du cache d'application de fichier Déclenché lorsque

progress

 : Déclenché lorsque le nouveau cache d'application de la page a été téléchargé

updateready

 : Déclenché lorsque le cache de l'application est entièrement disponible

cached

Trois avantages : application cache

1. 离线浏览

2. 提升页面载入速度

3. 降低服务器压力

注意事项：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5M）

2. 如果是manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存

3. 引用manifest的html必须与manifest文件同源，在同一个域下

4. 浏览器会自动缓存引用manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新

5. manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

6. FALLBACK中的资源必须和manifest文件同源

7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件

8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

9. 当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存和传统浏览器缓存的区别

1. 离线缓存是针对整个应用，浏览器缓存是单个文件

2. 离线缓存可以主动通知浏览器更新资源

Web SQL

Web SQL数据库API并不是HTML5规范的一部分，但它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。

核心方法

1. openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象

2. transaction： 控制一个事务，以及基于这种情况执行提交或回滚

3. executeSql：用于执行实际的SQL查询

打开数据库

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

执行查询操作

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

插入数据

注：博客主题里的代码块样式

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

注：需要实现的代码块样式，这个是 markdowpad2 里的操作，也是很多markdown写作工具提供的操作，只需要按一下 tab 键，非常方便

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

读取数据

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i <h2 id="IndexedDB">IndexedDB</h2><p>索引数据库（<code>IndexedDB</code>）<code>API</code>（作为<code>HTML5</code>的一部分）对创建具有丰富本地存储数据的数据密集型的离线<code>HTML5 Web</code>应用程序很有用，同时它还有助于本地缓存数据，使传统在线<code>Web</code>应用程序（比如移动<code>Web</code>应用程序）能够快速的运行和响应。</p><p><strong>异步<code>API</code></strong></p><p>在<code>IndexedDB</code>大部分操作并不是我们常用的调用方法（返回结果的模式），而是（请求-响应模式），比如打开数据库的操作。</p><p>相关推荐：</p><p><a href="http://www.php.cn/html5-tutorial-361331.html" target="_self">前端HTML5几种存储方式的总结</a></p><p><a href="http://www.php.cn/js-tutorial-340047.html" target="_self">JavaScript中变量的存储方式</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-302975.html" target="_self">在PHP中自定义session的存储方式_PHP教程</a></p><p class="comments-box-content"><br></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!