Stockage Web HTML5

if (modernizr.localstorage) { // Utilisez l'objet localStorage pour stocker des données } else { alerte («Impossible de stocker les préférences des utilisateurs car votre navigateur ne prend pas en charge le stockage local»); } Le setItem («clé», «valeur») nous permet d'écrire les données dans le stockage local. Quota_expesed_err L'exception sera lancée si la limite de stockage dépasse 5 Mo. Il est donc toujours préférable d'ajouter des blocs d'essai / capture au code de stockage lors de l'enregistrement des données.

<span>function setSettings() {
</span><span>if ('localStorage' in window && window['localStorage'] !== null) {
</span>	<span>try {
</span>		<span>var favcolor = document.getElementById('favcolor').value;
</span>		<span>var fontwt = document.getElementById('fontwt').value;
</span>		<span>localStorage.setItem('bgcolor', favcolor);
</span>		<span>localStorage.fontweight = fontwt;
</span>	<span>} catch (e) {
</span>		<span>if (e == QUOTA_EXCEEDED_ERR) {
</span>			<span>alert('Quota exceeded!');
</span>		<span>}
</span>	<span>}
</span>	<span>} else {
</span>		<span>alert('Cannot store user preferences as your browser do not support local storage');
</span>	<span>}
</span><span>}</span>

Nous pouvons vérifier si les données sont stockées dans le stockage local en utilisant les outils du développeur qui sont livrés avec les navigateurs. Par exemple, dans Chrome, cliquez avec le bouton droit sur le navigateur et sélectionnez Inspecter l'élément. Sélectionnez l'onglet Ressources, puis cliquez sur l'élément de stockage local. Nous pouvons voir les données sélectionnées par l'utilisateur stockées sous la forme de paires de clés / valeur. La page Web peut être rechargée avec les valeurs d'arrière-plan et de taille de police définies par l'utilisateur. Le GetItem («Key») aide à récupérer les données stockées dans la base de données.

<span>function applySetting() {
</span>	<span>if (localStorage.length != 0) {
</span>	<span>document.body.style.backgroundColor = localStorage.getItem('bgcolor');
</span>	<span>document.body.style.fontSize = localStorage.fontweight + 'px';
</span>	<span>document.getElementById('favcolor').value = localStorage.bgcolor;
</span>	<span>document.getElementById('fontwt').value = localStorage.fontweight;
</span>	<span>} else {
</span>	<span>document.body.style.backgroundColor = '#FFFFFF';
</span>	<span>document.body.style.fontSize = '13px'
</span>	<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>	<span>document.getElementById('fontwt').value = '13';
</span>	<span>}
</span><span>}</span>

La fonction de longueur récupère le nombre total de valeurs dans la zone de stockage. La fonction ci-dessus peut être appelée lors de l'événement onload de la balise corporelle comme suit La zone de stockage locale peut être effacée en utilisant la fonction clear () ou enlèver («clé») fonction. Dans notre exemple, la fonction ci-dessous est appelée sur l'événement de clic du bouton Effacer.

<span>function clearSettings() {
</span>		<span>localStorage.removeItem("bgcolor");
</span>		<span>localStorage.removeItem("fontweight");
</span>		<span>document.body.style.backgroundColor = '#FFFFFF';
</span>		<span>document.body.style.fontSize = '13px'
</span>		<span>document.getElementById('favcolor').value = '#FFFFFF';
</span>		<span>document.getElementById('fontwt').value = '13';
</span>
<span>}</span>

Événements de stockage

Lorsque nous définissons ou supprimons les données du stockage Web, un événement de stockage sera licencié sur l'objet de fenêtre. Nous pouvons ajouter des auditeurs à l'événement et gérer les modifications de stockage si nécessaire.

<span>window.addEventListener('storage', storageEventHandler, false);
</span>	<span>function storageEventHandler(event) {
</span>			<span>applySetting();
</span>	<span>}</span>

L'objet de l'événement a les attributs suivants

Clé
• - la propriété qui a changé
• newValue - la valeur nouvellement définie
• OldValue - Valeur stockée précédemment
• URL - Le chemin complet de l'URL d'où l'événement est originaire de
• Storagearea - Localstorage ou SessionStorage Object

N'oubliez pas que l'événement est licencié uniquement sur d'autres fenêtres (pas sur la fenêtre où l'événement est déclenché) et que l'événement n'est pas licencié s'il n'y a pas de changement dans les données. Les mêmes méthodes API s'appliquent également au stockage de session, sauf que les méthodes doivent être exécutées sur l'objet SessionStorage.

Conclusion

Ainsi, vous pouvez maintenant commencer à utiliser le stockage Web pour stocker les préférences des utilisateurs, les informations utilisateur, les informations de session, etc. Vous pouvez également essayer de créer des applications qui peuvent être utilisées complètement hors ligne et les données stockées pendant la ligne peuvent être renvoyées au serveur en tant que mise à jour par lots Lorsque l'utilisateur est à nouveau en ligne.

Questions fréquemment posées (FAQ) sur le stockage Web HTML5

Quelle est la différence entre SessionStorage et LocalStorage dans le stockage Web HTML5?

Dans le stockage Web HTML5, il existe deux types de stockage: SessionStorage et LocalStorage. La principale différence entre eux réside dans leur durée de vie et leur portée. SessionStorage est conçu pour être un stockage temporaire pour la durée d'une seule session de navigateur. Il est effacé dès la fin de la session, c'est-à-dire lorsque l'utilisateur ferme l'onglet ou la fenêtre du navigateur. D'un autre côté, Localstorage persiste même lorsque le navigateur est fermé et rouvert. Il n'a pas de temps d'expiration et reste jusqu'à ce qu'il soit effacé manuellement par l'utilisateur ou l'application Web.

Comment puis-je accéder et manipuler les données dans le stockage Web HTML5?

Accéder et manipuler les données dans HTML5 Le stockage Web est simple. Vous pouvez utiliser la méthode setItem () pour stocker les données, la méthode getItem () pour récupérer les données et supprimer la méthode () pour supprimer les données. Par exemple, pour stocker un élément de données dans LocalStorage, vous pouvez utiliser localStorage.SetItem («clé», «valeur»). Pour récupérer ces données, utilisez LocalStorage.getItem («Key»). Pour supprimer les données, utilisez LocalStorage.RemoveItem («Key»).

Le stockage Web HTML5 est-il sécurisé?

Le stockage Web HTML5 est sécurisé dans une certaine mesure. Il n'autorise pas le stockage d'informations utilisateur sensibles comme les mots de passe ou les numéros de carte de crédit. Cependant, il est susceptible d'attaques de scripts inter-sites (XSS). Par conséquent, il est recommandé de ne pas stocker d'informations sensibles et de toujours valider et désinfecter vos données avant de les stocker.

Quelle est la limite de stockage du stockage Web HTML5?

La limite de stockage pour le stockage Web HTML5 varie entre différents navigateurs. Cependant, la plupart des navigateurs modernes offrent environ 5 Mo de stockage par domaine pour localstorage. SessionStorage propose également la même quantité de stockage, mais il est important de se rappeler que ce stockage est temporaire.

Puis-je utiliser le stockage Web HTML5 sur tous les navigateurs?

Le stockage Web HTML5 est pris en charge par tous les navigateurs modernes y compris Chrome, Firefox, Safari, Opera et Internet Explorer 8 et plus. Cependant, c'est toujours une bonne pratique pour vérifier la compatibilité des navigateurs avant de l'utiliser.

Comment puis-je vérifier si un navigateur prend en charge le stockage Web HTML5?

Vous pouvez vérifier si un navigateur prend en charge le stockage Web HTML5 en utilisant une condition simple «IF» dans votre code javascript. If (typeof (stockage)! == «Undefined») {// code pour localStorage / sessionStorage. } else {// désolé! Pas de prise en charge du stockage Web ..}

Puis-je stocker des objets ou des tableaux dans le stockage Web HTML5?

Oui, vous pouvez stocker des objets ou des tableaux dans le stockage Web HTML5. Cependant, comme le stockage Web ne prend en charge que les valeurs de chaîne, vous devez convertir vos objets ou des tableaux en chaînes à l'aide de JSON.Stringify () avant de les stocker. Pour les récupérer, vous pouvez les convertir en objets ou en tableaux à l'aide de JSON.Parse ().

Comment puis-je effacer toutes les données dans le stockage Web HTML5?

Vous pouvez effacer toutes les données dans HTML5 Stockage Web à l'aide de la méthode Clear (). Par exemple, pour effacer toutes les données de LocalStorage, vous pouvez utiliser localStorage.Clear ().

Puis-je utiliser le stockage Web HTML5 pour les applications hors ligne?

Oui, le stockage Web HTML5 peut être utilisé pour applications hors ligne. Il vous permet de stocker des données sur le navigateur de l'utilisateur, qui peuvent ensuite être accessibles et utilisés même lorsque l'utilisateur est hors ligne.

Quelles sont les alternatives au stockage Web HTML5?

Il existe plusieurs alternatives au stockage Web HTML5, y compris les cookies, l'indexéddb et le web sql. Cependant, chacun d'eux a ses propres avantages et inconvénients, et le choix dépend des exigences spécifiques de votre application Web.

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!