Présentation du stockage Web et base de données locale-Tutoriel H5-php.cn

Article précédent : HTML5 Notes 2 - Explication détaillée des balises audio/vidéo HTML5

Présentation du stockage Web

En HTML5, en plus de l'élément Canvas, un autre nouvel ajout est très important. La fonction est la fonction de stockage Web qui peut enregistrer des données localement sur le client. Auparavant, les cookies pouvaient être utilisés pour enregistrer des informations utilisateur simples telles que les noms d'utilisateur sur le client

. Cependant, grâce à une utilisation à long terme, les gens l'ont fait. découvert que l'utilisation de cookies pour stocker des données permanentes existe.

Taille : La taille des cookies est limitée à 4 Ko
Bande passante : Les cookies sont envoyés avec des erreurs HTTP, donc une partie de l'envoi est bande passante gaspillée utilisée par les cookies
Complexité : Il est difficile de manipuler correctement les cookies.

En réponse aux problèmes ci-dessus, HTML5 a refourni la fonction de sauvegarde des données localement sur le client, qui est le stockage Web.

Fonction de stockage Web.

Comme son nom l'indique, la fonction Web Storage est la fonction de stockage de données sur le Web. Le stockage est ici destiné à la zone locale du client. Spécifiquement divisé en deux types :

sessionStorage : Enregistrer les données dans l'objet session. La session fait référence au temps qui s'écoule entre l'entrée sur le site Web et la fermeture du navigateur lorsqu'un utilisateur navigue sur un site Web, c'est-à-dire le temps passé par l'utilisateur à parcourir ce site Web. L'objet session peut être utilisé pour enregistrer toutes les données qui doivent être enregistrées pendant cette période.

localStorage :

Enregistrez les données sur le périphérique matériel local du client (disque dur) Même si le navigateur est fermé, les données existent toujours et existeront toujours la prochaine fois que vous ouvrirez le navigateur. pour visiter le site Web. Vous pouvez continuer à l'utiliser. localstorage est stocké via des paires clé-valeur.

Pour les outils de développement, j'utilise HBuilder.exe

pour créer une nouvelle page Test.html Le code est le suivant :

Afficher le code

<html><head><title></title><meta charset="UTF-8" /><script type="text/javascript">function saveSessiontorage(id) {var targat = document.getElementById(id);var str = targat.value;
                sessionStorage.setItem("msg", str);
            }function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
                targat.innerHTML = msg;
            }function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
                localStorage.setItem("msg", str);
            }function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
                targat.innerHTML = msg;
            }</script></head><body><p id="msg"></p><input type="text" id="txt" /><input type="button" value="存储数据" onclick="saveSessiontorage(&#39;txt&#39;)" /><input type="button" value="读取数据" onclick="getSessionStorage(&#39;msg&#39;)" /><p id="msg1"></p><p>    <input type="text" id="txt1" /></p><input type="button" value="Local存储数据" onclick="saveLocalStorage(&#39;txt1&#39;)" /><input type="button" value="Local读取数据" onclick="getLocalStorage(&#39;msg1&#39;)" /></body></html>

Copier après la connexion

localStorage

Après avoir fermé le navigateur et l'avoir rouvert, les données lues sont toujours existe, mais

sessionStorage Après avoir fermé le navigateur et l'avoir rouvert pour lire les données, il disparaît. Utilisez-le comme une simple base de données

Utilisez Web Storage comme une simple base de données Si vous pouvez résoudre la récupération de données et gérer les colonnes, vous pouvez utiliser Web Storage comme base de données.

Créez une nouvelle page Register.html avec le code suivant :

Afficher le code

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">function addUser () {var data=new Object;
                data.name=document.getElementById("txtName").value;
                data.phone=document.getElementById("txtPhone").value;
                data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
                localStorage.setItem(data.name,str);
                alert("注册成功");
            }function search (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用户名："+data.name+"</br>"+"电话："+data.phone+"</br>"+"地址："+data.address
                document.getElementById("txtMsg").innerHTML=result;
            }</script></head><body><div>用户名:<input type="text" id="txtName" /></div><div>电话号码:<input type="text" id="txtPhone" /></div><div>地址:<input type="text" id="txtAddress" /></div><div><input type="button" value="注册" onclick="addUser()"></div><br /><div>用户名：<input type="text" id="txtSearch"><input type="button" value="Search" onclick="search(&#39;txtSearch&#39;)"/></div><div id="txtMsg"></div></body></html>

Copier après la connexion

Base de données locale HTML5

En HTML5, le contenu pouvant être stocké localement sur le client a été grandement enrichi, et de nombreuses fonctions ont été ajoutées pour sauvegarder les données qui à l'origine devait être enregistré sur le serveur localement sur le client, améliorant ainsi considérablement les performances des applications Web et réduisant la charge sur le serveur. L'ère de l'utilisation du Web est revenue à l'ère de la « priorité côté client et priorité côté serveur ». . Il existe deux bases de données locales intégrées à HTML5, l'une est SQLLite et l'autre est indexedDB.

Utilisez executeSql pour exécuter la requête

1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);2.function dataHandler(transaction,results); 3.function errorHandler(transaction,errmsg);
4.rows.length Récupère le nombre d'enregistrements

Créez un nouveau SqlTest.html avec le code suivant :

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script type="application/javascript">var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为：(数据库名称，版本号，描述，大小) 如果数据库不存在则创建//            db.transaction(function(tx) {//                tx.executeSql("")//            })            transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});//参数：(sql语句，sql参数数组，执行成功的回调函数，执行失败的回调函数)</script></body></html>

Copier après la connexion

Base de données HTML5 indexedDB

En HTML5, une nouvelle base de données appelée "indexedDB" est ajoutée, qui est une base de données stockée localement sur le client NoSQL. base de données.

Créez un nouveau IndexedDBTest.html avec le code suivant :

Voir le code

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                }</script></head><body><input type="button" value="连接数据库"  onclick="connDB()"/></body></html>

Copier après la connexion

数据库的版本更新

只是成功链接数据库，我们还不能执行任何数据操作，我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。

新建versionUpdate.html，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function VersionUpdate () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
                        alert("数据库更新成功！旧版本号:"+oldVersion+"------新版本号："+newVersion);
                    }
                }</script></head><body><input type="button" value="更新数据库" onclick="VersionUpdate()" /></body></html>

Copier après la connexion

View Code

创建对象仓库

对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。

新建createStorge.html，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//统一IndexedDB在不同浏览器的实现            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function CreateStorge () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("数据库连接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("数据库连接失败！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var name="user";var optionParams={keyPath:"userid",autoIncrement:false};var store=idb.createObjectStore(name,optionParams);
                        alert("对象仓库创建成功!");
                    }
                }</script></head><body><input type="button" value="创建对象仓库" onclick="CreateStorge()" /></body></html>

Copier après la connexion

View Code

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!