recherche

Maison >interface Web >Tutoriel H5 >Analyser la fonction de stockage de HTML5 et les méthodes de fonctionnement associées des compétences du didacticiel Web SQL_html5

Analyser la fonction de stockage de HTML5 et les méthodes de fonctionnement associées des compétences du didacticiel Web SQL_html5

WBOY
WBOYoriginal
2016-05-16 15:45:551377parcourir

HTML5 introduit deux mécanismes, similaires aux cookies de session HTTP, pour stocker des données structurées côté client et surmonter les lacunes suivantes.

Des cookies sont inclus dans chaque requête HTTP, ce qui provoque le transfert des mêmes données et ralentit notre application Web.

Des cookies sont inclus avec chaque requête HTTP, ce qui entraîne l'envoi de données non cryptées sur Internet.

Les cookies ne peuvent stocker qu'une quantité limitée de 4 Ko de données, ce qui n'est pas suffisant pour stocker les données requises.
Les deux méthodes de stockage sont le stockage de session et le stockage local, qui seront utilisés pour gérer différentes situations.

Presque tous les navigateurs récents prennent en charge le stockage HTML5, y compris Internet Explorer.

Session Storage
_Session Storage_ est conçu pour les scénarios dans lesquels les utilisateurs effectuent une seule transaction, mais plusieurs transactions peuvent être effectuées dans différentes fenêtres en même temps.

Exemple

Par exemple, si un utilisateur achète un billet d'avion dans deux fenêtres différentes d'un même site Internet. Si le site Web utilise des cookies pour suivre les billets achetés par un utilisateur, les billets actuellement achetés seront « divulgués » en passant d'une fenêtre à l'autre lorsque l'utilisateur clique sur la page, ce qui pourrait amener l'utilisateur à acheter deux billets pour le même vol sans s'en apercevoir.

HTML5 a introduit l'attribut sessionStorage. Ce site Web peut être utilisé pour ajouter des données au stockage de la session. L'utilisateur peut toujours accéder à n'importe quelle page du même site dans la fenêtre ouverte contenant la session. Lorsque la fenêtre est fermée, la session sera fermée. également perdu.

Le code suivant définira une variable de session puis accédera à la variable :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3. <corps>
  5. <script type="texte/ javascript">
  6. if( sessionStorage.hits ){
  7. sessionStorage.hits = Numéro(sessionStorage.hits)
  8. }autre{
  9. sessionStorage.hits = 1
    10. ;
  10. }
  11. document.write("Total des visites :" sessionStorage.hits);
  12. script>
  13. <p>Actualisez la page pour augmenter le nombre de visites. p> 
  14. <p>Fermez la fenêtre, ouvrez-la à nouveau et vérifiez le résultat. p>
  16. corps>
  17. html>

Stockage local
_Local Storage_ est conçu pour être stocké sur plusieurs fenêtres et persiste sur la session en cours. En particulier, les applications Web peuvent vouloir stocker des millions d'octets de données utilisateur sur le client pour des raisons de performances, comme des documents entiers écrits par un utilisateur ou la boîte aux lettres d'un utilisateur.

Les cookies ne gèrent pas très bien cette situation car ils sont transmis à chaque demande.

Exemple

HTML5 a introduit l'attribut localStorage, qui peut être utilisé pour accéder à la zone de stockage local de​​la page sans limite de temps. Le stockage local est disponible chaque fois que nous utilisons cette page.

Le code suivant définit une variable de stockage local accessible à chaque accès à cette page, même à la prochaine ouverture de la fenêtre :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3. <corps>
  5. <script type="texte/ javascript">
  6. if( localStorage.hits){
  7. localStorage.hits = Numéro(localStorage.hits)
  8. }autre{
  9. localStorage.hits = 1
  10. }
  11. document.write("Total des visites :" localStorage.hits);
  12. script>
  13. <p>Actualisez la page pour augmenter le nombre de visites. p> 
  14. <p>Fermez la fenêtre, ouvrez-la à nouveau et vérifiez le résultat. p>
  16. corps>
  17. html>

Facile à apprendre les concepts ci-dessus - veuillez vous entraîner en ligne.

Supprimer le stockage Web
Le stockage de données sensibles sur votre ordinateur local peut être dangereux et laisser des failles de sécurité.

_Session Stored Data_ sera supprimée par le navigateur immédiatement après la fin de la session.

Pour effacer les paramètres de stockage local, vous devez appeler localStorage.remove('key'); cette 'key' est la clé correspondant à la valeur que nous voulons supprimer. Si vous souhaitez effacer tous les paramètres, vous devez appeler la méthode localStorage.clear().

Le code suivant effacera complètement le stockage local :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3. <corps>  
  4.   
  5.   <script type="texte/ javascript">  
  6.     localStorage.clear();   
  7.   
  8.     // Réinitialiser le nombre de coups.   
  9.     if( localStorage.hits ){   
  10.        localStorage.hits = Numéro(localStorage.hits)  1 ;   
  11.     }autre{   
  12.        localStorage.hits = 1;   
  13.     }   
  14.     document.write("Total Hits :"   localStorage.hits );   
  15.   script>  
  16.   <p>L'actualisation de la page ne n'augmenterait pas le compteur d'accès.p>  
  17.   <p>Fermez la fenêtre et ouvrez-la à nouveau et vérifiez le résultat. p>  
  18.   
  19. corps>  
  20. html>  

Web SQL Web
Web SQL Web API et HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 API。
核心方法
下面是规范中定义的三个核心方法。也会涵盖在本教程中：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法以及基于这种情况执行提交或者回滚。
executeSql ：这个方法用于执行实际的 SQL 查询。
开启数据库
如果数据库已经存在，openDatabase 方法负责开启数据库，如果不存在，这个方法会创建它。

使用下面的代码可以创建并开启一个数据库：

Code JavaScript复制内容到剪贴板
  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024 );  

La méthode ci-dessus accepte les cinq paramètres suivants :

Nom de la base de données
Numéro de version
Texte de description
Taille de la base de données
Rappel de création
Le dernier et cinquième paramètre, le rappel de création sera appelé après la création de la base de données. Cependant, même sans cette fonctionnalité, le runtime créera toujours la base de données et la version correcte.

Exécuter la requête
Pour exécuter la requête, vous devez utiliser la fonction database.transaction(). Cette fonction prend un paramètre, qui est une fonction responsable de l'exécution réelle de la requête, comme indiqué ci-dessous :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024);
  2. db.transaction(fonction (tx) {
  3. tx.executeSql('CRÉER UNE TABLE SI N'EXISTE PAS LES JOURNAUX (id unique, log)'
    4. );
  4. });

L'instruction de requête ci-dessus créera une table appelée LOGS dans la base de données 'mydb'.

Opération d'insertion
Pour créer une entrée dans la table, nous ajoutons une simple requête SQL à l'exemple ci-dessus comme suit :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024);
  2. db.transaction(fonction (tx) {
  3. tx.executeSql('CRÉER UNE TABLE SI N'EXISTE PAS LES JOURNAUX (id unique, log)'
    4. );
  4. tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'
  5. tx.executeSql('INSÉRER DANS LES JOURNAUX (id, log) VALUES (2, "logmsg")'
  6. });

Vous pouvez également transmettre des valeurs dynamiques comme celle-ci lors de la création d'une entrée :

Code JavaScriptCopier le contenu dans le presse-papiers
  1. var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024);
  2. db.transaction(fonction (tx) {
  3. tx.executeSql('CRÉER UNE TABLE SI N'EXISTE PAS LES JOURNAUX (id unique, log)'
    4. );
  4. tx.executeSql('INSÉRER DANS LES JOURNAUX
  5. (id,log) VALEURS (?, ?'), [e_id, e_log]; });

    7. Ici, e_id et e_log sont des variables externes, executeSql mappera chaque entrée du paramètre du tableau à "?".

    Opération de lecture
    Pour lire un enregistrement déjà existant, nous pouvons utiliser un rappel pour capturer le résultat comme suit :

    Code JavaScriptCopier le contenu dans le presse-papiers
    1. var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024);
    2. db.transaction(fonction (tx) {
    3. tx.executeSql('CRÉER UNE TABLE SI N'EXISTE PAS LES JOURNAUX (id unique, log)'
      4. );
    4. tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'
    5. tx.executeSql('INSÉRER DANS LES JOURNAUX (id, log) VALUES (2, "logmsg")'
    6. });
    7. db.transaction(fonction (tx) {
    8. tx.executeSql('SELECT * FROM LOGS', [], fonction (tx, résultats) {
    9. var len = results.rows.length, i
    10. msg = "

      Lignes trouvées : " len "

      "      ;
    11. document.querySelector('#status').innerHTML =
    12. pour (i = 0; i < len; i ){
    13. alert(results.rows.item(i).log
    14. }
    15. }, nul);
      16. });
    Exemple final
    Enfin, mettons cet exemple dans un document HTML5 complet comme celui-ci et essayons de l'exécuter dans Safari :


    Code JavaScript
    Copier le contenu dans le presse-papiers
    1.   
    2.   
    3.   
    4. "text/javascript">   
    5. var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024 );   
    6. var msg;   
    7. db.transaction(fonction (tx) {   
    8.   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');   
    9.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');   
    10.   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');   
    11.   msg = '

      Message de journal créé et ligne insérée.

      '       ;   
    12.   document.querySelector('#status').innerHTML =  msg;   
    13. });   
    14.   
    15. db.transaction(fonction (tx) {   
    16.   tx.executeSql('SELECT * FROM LOGS', [], fonction (tx, résultats) {   
    17.    var len = results.rows.length, i;   
    18.    msg = "

      Lignes trouvées : "   len   "

      "      ;   
    19.    document.querySelector('#status').innerHTML  =  msg;   
    20.    pour (i = 0; i < len; i ){   
    21.      msg = "

      "   results.rows.item(i).log   "

      "      ;   
    22.      document.querySelector('#status').innerHTML  =  msg;   
    23.    }   
    24.  }, null);   
    25. });   
    26.   
    27.   
    28.   
    29. "status" name="status">Message de statut
    30.   
    31.   

    代码如下 :

    Message de journal créé et ligne insérée.

    Lignes trouvées : 2

    foobar

    logmsg

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：Explication détaillée de l'utilisation de base de l'API de communication dans les compétences du didacticiel HTML5_html5Article suivant：Explication détaillée de l'utilisation de base de l'API de communication dans les compétences du didacticiel HTML5_html5

Articles Liés

Voir plus