Comment H5 exploite le stockage local et la base de données locale

Cette fois, je vais vous montrer comment H5 exploite le stockage local et la base de données locale, et quelles sont les précautions pour H5 exploitant le stockage local et la base de données locale. Ce qui suit est un cas pratique. , jetons un coup d'œil ensemble.

Stockage local

1.1 Le contexte de l'origine du stockage local

En raison de taille des cookies à l'ère HTML4, format, format de stockage des données et autres restrictions Si une application de site Web souhaite stocker certaines informations de l'utilisateur du côté du navigateur, elle ne peut utiliser que des cookies. Cependant, ces limitations des cookies signifient que les cookies ne peuvent stocker que des données simples telles que des identifiants tels que des identifiants.

Voici les limitations des cookies :

La plupart des navigateurs prennent en charge les cookies jusqu'à 4 096 octets.

Les navigateurs limitent également le nombre de cookies qu'un site peut stocker sur l'ordinateur d'un utilisateur. La plupart des navigateurs n'autorisent que 20 cookies par site ; si vous essayez de stocker plus de cookies, les cookies les plus anciens sont supprimés.

Certains navigateurs imposent également une limite absolue au nombre total de cookies qu'ils accepteront de tous les sites, généralement 300.

Les cookies seront envoyés au serveur backend avec les requêtes HTTP par défaut, mais toutes les requêtes ne nécessitent pas de cookies. Par exemple, les requêtes js, css, images, etc. ne nécessitent pas de cookies.

Afin de briser une série de limitations de Cookie, HTML5 peut stocker directement de grandes quantités de données sur le navigateur client via la nouvelle API de JS et prend en charge des bases de données locales complexes, rendant JS plus efficace.

html5 prend en charge deux types de WebStorage :

Stockage local permanent (localStorage)

Stockage local au niveau de la session (sessionStorage)

1.2 Permanent stockage local : localStorage

L'objet localStorage a été ajouté à la dernière API JS pour permettre aux utilisateurs de stocker des données Web stockées en permanence. De plus, les données ne seront pas envoyées au serveur backend avec la requête Http, et la taille des données stockées n'a pas besoin d'être prise en compte, car la norme Html5 exige que le navigateur prenne en charge au moins 4 Mo. Par conséquent, cela est complètement. contourne les limites des cookies et fournit une meilleure solution pour le Web. L'application stocke localement des données de trace utilisateur complexes pour fournir une assistance technique très pratique. Ensuite, nous présenterons les méthodes couramment utilisées de localStorage.

localStorage propose quatre méthodes pour nous aider à effectuer des opérations connexes sur le stockage local.

setItem(key, value) ajoute des données de stockage local. Les deux paramètres sont très simples et je n’entrerai pas dans les détails.

getItem(key) obtient la valeur correspondante via la clé.

removeItem(key) supprime les données locales par clé.

clear() efface les données.

Le code est le suivant :

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("demokey", "http://www.shiyanlou.com");
    //通过key来获取value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //localStorage.clear();
    alert(localStorage.length);
</script>

1.3 Stockage local au niveau de la session : sessionStorage

Un objet Js est ajouté en HTML5 : sessionStorage ; Pass Cet objet peut fonctionner directement sur le WebStorage au niveau de la session stocké dans le navigateur. Les données stockées dans sessionStorage sont d'abord sous forme de clé-valeur. De plus, elles sont liées à la session en cours du navigateur. À la fin de la session, les données seront automatiquement effacées, comme un cookie sans délai d'expiration défini. .

sessionStorage fournit quatre méthodes pour nous aider à effectuer des opérations connexes sur le stockage local.

setItem(key, value) ajoute des données de stockage local. Les deux paramètres sont très simples et je n’entrerai pas dans les détails.

getItem(key) obtient la valeur correspondante via la clé.

removeItem(key) supprime les données locales par clé.

clear() efface les données.

Le code est le suivant :

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    sessionStorage.setItem("demokey", "http://blog.itjeek.com");
    //通过key来获取value
    var dt = sessionStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //sessionStorage.clear();
    alert(sessionStorage.length);
</script>

1.4 Données locales puissantes

Bien que HTML5 fournisse déjà de puissants stockage local et sessionStorage, ils peuvent tous les deux fournit uniquement des données pour stocker des structures de données simples, mais ne peut rien faire pour les données d'applications Web complexes. Ce qui est étonnant, c'est que HTML5 fournit une prise en charge de base de données côté navigateur, nous permettant de créer une base de données locale côté navigateur directement via l'API JS, et prend en charge les opérations SQL CRUD standard, ce qui rend les applications Web hors ligne plus pratiques pour stocker des données structurées. Ensuite, nous présenterons les API pertinentes et l'utilisation des données locales.

Les étapes les plus élémentaires pour faire fonctionner une base de données locale sont :

Première étape : méthode openDatabase : créez un objet pour accéder à la base de données.

第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.

第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。

接下来分别介绍一下相关的方法的参数和用法。

1.4.1 openDatabase方法

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之

var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：

数据库名称。

数据库的版本号，目前来说传个1.0就可以了，当然可以不填；

对数据库的描述。

设置分配的数据库的大小（单位是kb）。

回调函数(可省略)。

初次调用时创建数据库，以后就是建立连接了。

1.4.2 db.transaction方法

可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以执行SQL脚本。

1.4.3 executeSql方法执行查询
 

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

参数说明：

qlQuery：需要具体执行的sql语句，可以是create、select、update、delete;

[value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中;

dataHandler：执行成功时调用的回调函数，通过该函数可以获得查询结果集;

errorHandler：执行失败时调用的回调函数;

1.5 综合实例

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化数据库
            if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的Sql脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回调函数alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//页面加载完成后绑定页面按钮的点击事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行sql脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
            //如果数据库不存在那么创建之
            var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
            return db;
        }
        //显示所有数据库中的数据到页面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//将数据展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5怎么操作WebSQL数据库

Drag事件编辑器实现拖拽上传图片效果

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!