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.
La croissance sauvage des cookies
Stockage local stockage local
-
Séance de stockage local
Cache hors ligne (cache d'application)
Web SQL
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 :
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Copier après la connexion
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
- - Les fichiers répertoriés sous cette rubrique seront téléchargés après le premier Mise en cache
CACHE MANIFEST
- - Les fichiers sous ce titre nécessitent une connexion au serveur et ne seront pas mis en cache
NETWOrK
- - Documents sous cette rubrique précise la page de secours lorsque la page n'est pas accessible (comme la page
) FALLBACK404
Complètedemo
CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
NETWORK:
login.jsp
FALLBACK:
/html/ /offline.html
Copier après la connexion
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
离线浏览
提升页面载入速度
降低服务器压力
注意事项：
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5M）
如果是manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
浏览器会自动缓存引用manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新
manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新
离线缓存和传统浏览器缓存的区别
离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存可以主动通知浏览器更新资源
Web SQL
Web SQL数据库API并不是HTML5规范的一部分，但它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。
核心方法
openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象
transaction： 控制一个事务，以及基于这种情况执行提交或回滚
executeSql：用于执行实际的SQL查询
打开数据库
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);Copier après la connexion
执行查询操作
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)');
})Copier après la connexion
插入数据
注：博客主题里的代码块样式
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")');
});Copier après la connexion
Copier après la connexion
注：需要实现的代码块样式，这个是 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")');
});Copier après la connexion
Copier après la connexion
读取数据
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 < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});Copier après la connexion
IndexedDB
索引数据库（IndexedDB）API（作为HTML5的一部分）对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web应用程序很有用，同时它还有助于本地缓存数据，使传统在线Web应用程序（比如移动Web应用程序）能够快速的运行和响应。
异步API
在IndexedDB大部分操作并不是我们常用的调用方法（返回结果的模式），而是（请求-响应模式），比如打开数据库的操作。
相关推荐：
前端HTML5几种存储方式的总结
JavaScript中变量的存储方式
在PHP中自定义session的存储方式_PHP教程
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
