Introduction détaillée au stockage local et à la base de données locale de H5

Cette fois, je vais vous apporter une introduction détaillée au stockage local et à la base de données locale Quelles sont les précautions lors de l'utilisation du stockage local et de la base de données locale de H5. Voici des cas pratiques. Jetons un coup d'oeil.

Stockage local

1.1 Le contexte de l'origine du stockage local

En raison des limitations de taille, de format, de format de données de stockage, etc. des cookies à l'ère HTML4, si une application du site Web souhaite les stocker du côté du navigateur. Certaines informations de l'utilisateur ne peuvent être obtenues qu'à l'aide de 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 Stockage local permanent : 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 : le stockage sessionStorage peut être directement exploité ; via cet objet WebStorage au niveau de la session 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 localStorage et sessionStorage, les deux ne peuvent fournir que du stockage Les données de les structures de données simples sont impuissantes 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.

Étape 2 : utilisez l'objet d'accès à la base de données créé lors de la première étape pour exécuter la méthode de transaction. Grâce à cette méthode, vous pouvez configurer une méthode de réponse à l'événement pour démarrer la transaction avec succès. SQL peut être exécuté dans l'événement. méthode de réponse.

Étape 3 : Exécuter la requête via la méthode executeSql Bien entendu, la requête peut être : CRUD.

Ensuite, nous présenterons les paramètres et l'utilisation des méthodes pertinentes.

1.4.1 Méthode openDatabase

//Démo : Récupérer ou créer une base de données, si la base de données n'existe pas, créez-la

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

méthode openDatabase ouvre une base de données existante. Si la base de données n'existe pas, elle peut également

créer une base de données. Les significations de plusieurs paramètres sont :

nom de la base de données.

Le numéro de version de la base de données. Actuellement, 1.0 suffit. Bien sûr, vous n'avez pas besoin de le renseigner

Une description de la base de données.

Définissez la taille de la base de données allouée (l'unité est Ko).

Fonction de rappel (peut être omise).

Créez la base de données lors du premier appel, puis établissez la connexion.

1.4.2 db.transaction方法

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

<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&#39;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中文网其它相关文章！

相关阅读：

HTML的table鼠标拖拽排序该如何实现

html属于什么文件html的文件该如何打开 

html怎样实现页面跳转时传递参数

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!