RAID HTML5: Extension de l'API JavaScript 3 - Une nouvelle expérience dans le stockage local

Le stockage des données sur le client peut résoudre de nombreux problèmes et réduire la transmission de données inutile:

1. Peut enregistrer l'état du programme: l'utilisateur peut savoir où il travaille après la fermeture du navigateur et l'ouvrir.

2. Peut mettre en cache les données: il n'est pas nécessaire d'obtenir beaucoup de données qui ne changent pas du serveur à chaque fois.

3. Peut enregistrer les préférences des utilisateurs: ce type de données n'a généralement pas besoin d'être présent sur le serveur.

Avant le stockage local HTML5, si nous voulons enregistrer des données persistantes sur le client, il existe plusieurs options:

1. Cookies HTTP. L'inconvénient des cookies HTTP est évident. Ils ne peuvent stocker que jusqu'à 4KB de données, et chaque demande HTTP sera renvoyée au serveur et en texte brut transmis (sauf si vous utilisez SSL).

2. IE UserData. UserData est une solution de stockage locale lancée par Microsoft pendant la guerre du navigateur dans les années 1990. Il utilise l'attribut de comportement de DHTML pour stocker des données locales, permettant à chaque page de stocker jusqu'à 64k de données et jusqu'à 640k données par site. Les inconvénients de UserData sont évidents. Cela ne fait pas partie de la norme Web. À moins que votre programme ne soit uniquement à soutenir IE, il est fondamentalement inutile.

3. Cookies flash. Les cookies flash ne sont en fait pas les mêmes que les cookies HTTP. Peut-être que son nom devrait être un stockage local flash. Les cookies flash permettent à chaque site de stocker les données pas plus de 100k par défaut. S'il le dépasse, Flash demandera automatiquement un plus grand espace de stockage de l'utilisateur. Avec l'interface EXTERNALInterface de Flash, vous pouvez facilement utiliser le stockage local de Flash via JavaScript. Le problème avec Flash est très simple, car c'est Flash.

4. Google Gears. Gears est un plug-in de navigateur open source publié par Google en 2007, visant à améliorer la compatibilité des principaux navigateurs. Gears a une base de données SQL intégrée intégrée basée sur SQLite et fournit une API unifiée pour accéder à la base de données. Après avoir obtenu l'autorisation de l'utilisateur, chaque site peut stocker des données illimitées dans la base de données SQL. Le problème de Gears est que Google lui-même ne l'utilise plus.

La variété éblouissante des technologies conduit à des problèmes de compatibilité des navigateurs. Les cookies les plus courants peuvent être des cookies.

En réponse aux problèmes ci-dessus, HTML5 fournit une solution plus idéale: si vous devez stocker des données qui peuvent être résolues simplement à l'aide de paires de clés / valeur, vous pouvez utiliser le stockage Web.

Par rapport aux cookies, le stockage Web présente de nombreux avantages, résumé comme suit:

1. Espace de stockage plus grand: chaque espace de stockage indépendant sous IE8 est de 10 m et d'autres navigateurs ont des implémentations légèrement différentes, mais elles sont beaucoup plus grandes que les cookies.

2. Le contenu stocké ne sera pas envoyé au serveur: lorsqu'un cookie est défini, le contenu du cookie sera envoyé avec la demande sur le serveur, qui est un gaspillage de bande passante pour les données stockées localement. Les données du stockage Web existent uniquement localement et n'interagiront pas avec le serveur.

3. Des interfaces plus riches et faciles à utiliser: le stockage Web fournit un ensemble plus riche d'interfaces, ce qui facilite le fonctionnement des données.

4. Espace de stockage indépendant: chaque domaine (y compris le sous-domaine) a un espace de stockage indépendant, et chaque espace de stockage est complètement indépendant, il ne provoquera donc pas la confusion des données.

Le stockage Web se compose en fait de deux parties: SessionStorage et LocalStorage.

SessionStorage est utilisé pour stocker les données d'une session localement, qui ne peut être accessible que sur des pages de la même session et les données seront détruites une fois la session terminée. Par conséquent, SessionStorage n'est pas un stockage local persistant, mais seulement un stockage au niveau de la session.

LocalStorage est utilisé pour le stockage local persistant, et les données n'expireront jamais à moins qu'elles ne soient activement supprimées.

Le stockage Web est pris en charge dans les principaux navigateurs grand public, mais pour être compatible avec les anciens navigateurs, nous devons toujours vérifier si cette technologie peut être utilisée.

La première méthode: vérifiez si le navigateur prend en charge le stockage Web en vérifiant si l'objet de stockage existe:

if (typeof (stockage)! == "Undefined") {

// Oui! LocalStorage et SessionStorage Support!

// du code ...

} autre {

// Désolé! Aucune prise en charge du stockage Web ..

}

La deuxième façon est de vérifier séparément les objets respectifs, par exemple si LocalStorage le prend en charge:

if (typeof (localStorage) == 'Undefined') {

alert («Votre navigateur ne prend pas en charge HTML5 LocalStorage. Essayez la mise à niveau.»);

} autre {

// Oui! LocalStorage et SessionStorage Support!

// du code ...

}

ou:

if ('localStorage' dans Window && window ['localstorage']! == null) {

// Oui! LocalStorage et SessionStorage Support!

// du code ...

} autre {

alert («Votre navigateur ne prend pas en charge HTML5 LocalStorage. Essayez la mise à niveau.»);

}

ou

if (!! localstorage) {

// Oui! LocalStorage et SessionStorage Support!

// du code ...

} autre {

alert («Votre navigateur ne prend pas en charge HTML5 LocalStorage. Essayez la mise à niveau.»);

}

De toute évidence, la première méthode est la plus directe et la plus simple.

Le stockage Web stocke les paires de valeurs clés et le navigateur le stocke en chaîne. N'oubliez pas de les convertir en d'autres formats si nécessaire.

À l'exception des différentes utilisations de SessionStorage et LocalStorage, la liste des membres est la même:

clé = valeur: stocker les paires de valeurs de clé

setItem (clé, valeur): Enregistrer les paires de valeurs de clé

getItem (clé): obtenez la paire de valeurs de clé

Supprimer (clé): supprimer toutes les paires de valeurs de clé

clear (): effacer toutes les paires de valeurs clés

Longueur: le nombre de paires de valeurs clés

Ici, nous devons encore souligner: le type de valeur dans la méthode setItem (clé, valeur) peut théoriquement être de n'importe quel type, mais en fait, le navigateur appellera la méthode de valeur tostring pour obtenir sa valeur de chaîne et la stocker localement. Par conséquent, s'il s'agit d'un type personnalisé, vous devez définir vous-même une méthode de tostring significative. Par exemple, l'exemple suivant est utilisé en conjonction avec JSON.Stringify:

var personne = {'name': 'rainman', 'age': 24};

LocalStorage.SetItem ("ME", JSON.StriNify (personne));

JSON.Parse (localStorage.getItem ('Me')). Nom; // 'Rainman'

/ **

* Json.stringify, convertir les données JSON en chaînes

* Json.stringify ({'name': 'Fred', 'Age': 24}); // '{"name": "Fred", "Age": 24}'

* Json.stringify (['a', 'b', 'c']); // '["a", "b", "c"]'

* JSON.Parse, anti-résolution JSON.Strification

* JSON.Parse ('["A", "B", "C"]') // ["A", "B", "C"]

* /

De plus, lors de l'ajout de paires de valeurs clés, si le nombre d'ajout est important, il est plus sûr de vérifier s'il y a des exceptions dépassant la limite:

essayer {

localStorage.setItem (itemId, valeurs.join (';'));

} catch (e) {

if (e == quota_exesed_err) {

alert ('quota dépassé!');

}

}

La méthode de stockage Web est très simple. L'exemple suivant est de compter le nombre de clics sur le bouton:

<! Doctype html>

<html>

<adal>

<cript>

fonction ClickCounter ()

{

if (typeof (stockage)! == "Undefined")

{

if (localstorage.clickcount)

{

localStorage.clickCount = nombre (localStorage.clickCount) +1;

}

autre

{

localStorage.clickCount = 1;

}

document.getElementById ("result"). innerhtml = "Vous avez cliqué sur le bouton" + localStorage.clickCount + "Time (s).";

}

autre

{

document.getElementById ("Result"). innerHtml = "Désolé, votre navigateur ne prend pas en charge le stockage Web ...";

}

}

</cript>

</ head>

<body>

<p> <bouton onclick = "clickCounter ()" type = "bouton"> Cliquez sur moi! </fut-bouton> </p>

<div id = "result"> </div>

<p> Cliquez sur le bouton pour voir le compteur augmenter. </p>

<p> Fermez l'onglet (ou fenêtre) du navigateur, et réessayez, et le compteur continuera de compter (n'est pas réinitialisé). </p>

</docy>

</html>

Dans l'exemple ci-dessus, vous pouvez modifier LocalStorage en sessionStorage, cliquez plusieurs fois sur le bouton et vérifier l'effet avant et après la fermeture du navigateur.

Les défauts du stockage Web sont principalement concentrés dans sa sécurité, qui se reflètent dans les deux points suivants:

1. Le navigateur allouera un espace de stockage indépendant pour chaque domaine, c'est-à-dire que le script ne peut pas accéder à l'espace de stockage dans le domaine B dans le domaine A, mais le navigateur ne vérifiera pas si le domaine où se trouve le script est le même que le domaine actuel. C'est-à-dire que les scripts intégrés dans le domaine A dans le domaine B peuvent toujours accéder aux données du domaine B.

2. Les données stockées localement ne sont pas cryptées et ne seront jamais expirées, ce qui est très facile à provoquer des fuites de confidentialité.

De plus, pour plus de problèmes liés à la sécurité, veuillez vous référer au lien dans la référence pratique ultérieurement.

Dans l'ancienne proposition HTML5, si vous avez besoin de stocker des données complexes, vous pouvez utiliser la base de données Web, qui peut utiliser SQL comme un programme client (la norme de base de données Web a été abandonnée, donc voici une brève mention);

Ceci est également proposé dans HTML5. Une fois le navigateur fermé, les informations stockées à l'aide de GlobalStorage peuvent toujours être conservées. Comme LocalStorage, les informations stockées sur n'importe quelle page du domaine peuvent être partagées par toutes les pages, mais seuls Firefox les prend en charge.

Syntaxe de base:

• GlobalStorage ['Developer.mozilla.org'] - Tous les sous-domaines sous Developer.Mozilla.org peuvent être lus et écrits via cet objet de stockage d'espace de noms.

• GlobalStorage ['mozilla.org'] - Toutes les pages Web sous le nom de domaine Mozilla.org peuvent être lues et écrites via cet objet de stockage d'espace de noms.

• GlobalStorage ['org'] - Toutes les pages Web sous le nom de domaine .org peuvent être lues et écrites via cet objet de stockage d'espace de noms.

• GlobalStorage [''] - Toute page Web sous n'importe quel nom de domaine peut être lue et écrite via cet objet de stockage d'espace de noms.

Propriétés de la méthode:

• setItem (clé, valeur) - définir ou réinitialiser la valeur de clé.

• GetItem (clé) - obtient la valeur clé.

• REPOURITEM (KEY) - Supprime la valeur de clé.

• Définissez la valeur clé: Window.GlobalStorage [planabc.net] .key = valeur;

• Obtenez la valeur clé: valeur = window.globalStorage [planabc.net] .key;

Autres fonctionnalités:

• Le temps d'expiration est le même que LocalStorage, et certaines autres fonctionnalités sont également similaires à LocalStorage.

• Firefox ne prend désormais en charge le stockage de GlobalStorage dans le domaine actuel. L'utilisation d'un domaine commun provoquera un code d'erreur de sécurité d'erreur similaire: 1000.

Enfin, nous voulons introduire IndededDB. Par rapport aux deux autres spécifications, seul Firefox implémente actuellement IndededDB (en passant, Mozilla dit qu'ils n'implémenteront jamais la base de données Web SQL), mais Google a déclaré qu'il envisageait d'ajouter le support IndexDB à Chrome.

IndededDB présente le concept d'un magasin d'objets, qui est un peu comme une base de données SQL où vous pouvez stocker des enregistrements dans la base de données, et chaque enregistrement peut avoir de nombreux champs, chaque champ a un type de données spécifique, vous pouvez choisir un sous-ensemble d'enregistrements et le traverser avec le curseur, tandis que tous les modifications du magasin d'objets sont basées sur les transactions.

Pour plus d'informations, veuillez vous référer à la documentation sur IndededDB dans Firefox dans la référence d'utilisation ultérieurement.

Document officiel: http://www.w3schools.com/html5/

Modèle soucis: http://www.cuoxin.com/w3school/html5/

Sécurité du stockage local: http://www.mhtml5.com/2012/03/4586.html

Caractéristiques expérimentales de Firefox IndededDB: https://developer.mozilla.org/en-us/docs/indexeddb