Maison >interface Web >Tutoriel H5 >Stockage local HTML5 : que se passera-t-il s'il n'y a pas de compétences du didacticiel database_html5

Stockage local HTML5 : que se passera-t-il s'il n'y a pas de compétences du didacticiel database_html5

WBOYoriginal: 2016-05-16 15:49:391690parcourir

Avant-propos

Le contenu principal de ce chapitre est le stockage Web et la base de données locale. Le stockage Web est une optimisation des cookies. La base de données locale est une nouvelle fonctionnalité de HTML5. Elle peut être utilisée pour créer une base de données sur le client

Réduisez considérablement la charge côté serveur et accélérez l'accès aux données.

Pour étudier ce chapitre, vous devez maîtriser les concepts de base du stockage Web et comprendre l'utilisation et les différences entre sessionStorage et localStorage

Maîtriser l'utilisation de la base de données locale

Qu'est-ce que WebStorage ?

Comme mentionné précédemment, le stockage Web est une optimisation des cookies. HTML4 utilise des cookies pour stocker les données utilisateur sur le client. Après une utilisation à long terme, les problèmes suivants ont été détectés :

<span style="COLOR: #000000">大小限制在4kbcookie每次随HTTP事务一起发送，浪费带宽正确操作cookie很复杂（这个有待考虑）</span>

En raison des problèmes ci-dessus, HTML5 propose WebStorage comme nouvelle technologie de stockage local côté client.

Copier le code

Le code est le suivant :

La technologie de stockage Web stocke les données sur le Web, c'est-à-dire destiné au client local ; spécifiquement divisé en deux types :
sessionStrage :
session signifie session. La session fait ici référence à la période de temps allant de l'entrée sur le site Web à la fermeture du site Web lorsque l'utilisateur navigue sur un site Web. L'objet de session n'est valable que pour une durée limitée.

localStorage :
Enregistre les données sur le périphérique matériel client, quel qu'il soit, ce qui signifie que les données seront là la prochaine fois que l'ordinateur sera allumé.

La différence entre les deux est que l’un est destiné au stockage temporaire et l’autre au stockage à long terme.

Exemple d'utilisation

Copier le code

Le code est tel suit :

Application simple

Expérience de stockage Web

Vous le ressentirez lorsque vous le regarderez dans le navigateur Chrome.

Tableau de messages Web simple

Copier le code

Le code est le suivant :

简单留言板

</ title><br> </head><br> <body><br> <h1><br> Stockage Web 实验</h1><br> <div id="msg" style="margin : 10px 0 ; bordure : 1px noir uni ; remplissage : 10px ; largeur : 300px;<br /> hauteur min : 100px;"><br> </div><br> <input type="text" id ="text" /><br> <button onclick="save();"><br> 留言</button><br> <button onclick="_clear();"><br> 清空</button><br> <script type="text/javascript"><br> var msg = document.getElementById('msg'),<br> text = document.getElementById('text') ;<br> <br> function save() {<br> var str = text.value;<br> var k = new Date().getTime();<br> localStorage.setItem(k, str);<br> init();<br> }<br> <br> function init() {<br> msg.innerHTML = '';<br> var dom = '';<br> pour (var i = 0, len = localStorage.length; je &Lt ; lentille; je ) {<br> dom = '<div>' localStorage.key(i) ':' localStorage.getItem(localStorage.key(i)) '</div>'<br> }<br> msg.innerHTML = dom;<br> }<br> <br> function _clear() {<br> msg.innerHTML = '';<br> localStorage.clear();<br> }<br> <br> </script><br> </body><br> </html><br> </div> <br> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042510451022.jpg"></p> <p>更复杂的运用中，可以将value值用作json字符串，以此达到用作数据表的目的；</p> <p>本地数据库 </p> <p>Pour HTML5, il s'agit d'une application HTML5.存在服务器端，HTML5则改变了这一原则。</p> <p>这种不需要存储在服务器的专有名词为« SQLLite »（我终于知道他是干什么的了）<br><span style="COLOR: #000000"><br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));"><u>复制代码</u></span></div>代码如下 :</div> <div class="msgborder" id="phpcode60"> <br>使用SQLLite数据库，需要两个必要步骤：<br>创建数据库访问对象<br>使用事务处理</span> </p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="COLOR: #000000">创建对象：<br>openDatabase(dbName, version, dbDesc, size)</span></pre> <pre class="brush:php;toolbar:false"><span style="COLOR: #000000">实际访问：<br>db.transaction(function () {<br>　　tx.excuteSql('create table ......'); <br>});</span></pre> <br>excuteSql(sql, [], dataHandler, errorHandler)//后面两个为回调函数；[]估计是做sql注入处理<br> </div></span> JQuery ：</p> <p> </p>做的时候居然发现我的FF不支持本地数据库！！！以下是用chrome完成的简单的通讯录：<p><br><br></p> <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));">复制代码<u></u></span>代码如下 :</div> <div class="msgborder" id="phpcode61"> <br>通讯录<br> <!DOCTYPE html ><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head> <br> <title>

本地数据库实现web通讯录

姓名：
手机：

结语

这章东西其实也是非常简单的，我再一次涌起了这种想法：

其实HTML5就是HTML4 api接口，目的就是让我们可以用js做更多事情罢了。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse de la dégradation d'un site Web élégant basée sur les compétences du didacticiel Modernizr_html5Article suivant：Analyse de la dégradation d'un site Web élégant basée sur les compétences du didacticiel Modernizr_html5

Articles Liés

Voir plus