Qu’est-ce que le Web en HTML5 ? Quels sont les éléments du stockage Web ?

Stockage Web HTML5, une meilleure méthode de stockage local que les cookies. Cet article présente la signification et l'analyse des éléments du stockage Web HTML5.

Qu'est-ce que le stockage Web HTML5 ?

En utilisant HTML5, vous pouvez stocker les données de navigation de l'utilisateur localement.

Auparavant, le stockage local utilisait des cookies. Mais le stockage Web doit être plus sécurisé et plus rapide. Les données ne seront pas enregistrées sur le serveur, mais ne seront utilisées que lorsque les utilisateurs demanderont des données sur le site Web. Il peut également stocker de grandes quantités de données sans affecter les performances du site Web.

Les données existent dans des paires clé/valeur, et les données d'une page Web ne peuvent être consultées et utilisées que par cette page Web.

Les deux objets utilisés pour stocker les données sur le client sont :

localStorage - utilisé pour sauvegarder les données de l'ensemble du site Web pendant une longue période temps, et les données enregistrées n’expirent pas jusqu’à ce qu’elles soient supprimées manuellement.

sessionStorage - Utilisé pour enregistrer temporairement les données de la même fenêtre (ou onglet). Les données seront supprimées après la fermeture de la fenêtre ou de l'onglet.

Avant d'utiliser le stockage Web, vous devez vérifier si le navigateur prend en charge localStorage et sessionStorage :

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}localStorage 对象

Les données stockées par l'objet localStorage n'ont pas de limite de temps. Les données sont toujours disponibles après le jour, la semaine ou l'année suivante.

localStorage.sitename="PHP中文网教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

Exemple d'analyse :

Utilisez key="sitename" et value="Rookie Tutorial" pour créer une paire clé/valeur localStorage.

Récupérez la valeur avec la clé "sitename" et insérez les données dans l'élément avec id="result".

L'exemple ci-dessus peut également s'écrire comme ceci :

// 存储
localStorage.sitename = "PHP中文网教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

Supprimer ""sitename" dans localStorage :

localStorage.removeItem(""sitename");

Qu'il s'agisse de localStorage ou de sessionStorage, vous peut utiliser Les API sont les mêmes, et celles couramment utilisées sont les suivantes (en prenant localStorage comme exemple) :

• Sauvegarde des données : localStorage.setItem(key,value);

• Lire les données : localStorage.getItem(key);

• Supprimer des données uniques : localStorage.removeItem(key);

• Supprimer toutes les données : localStorage.clear();

• Récupérer la clé d'un index : localStorage.key(index);

Conseil : les paires clé/valeur sont généralement stockées sous forme de chaînes, et vous pouvez convertir ce format en fonction de vos besoins.

L'exemple suivant montre la conversion de valeur de chaîne dans le code

. Il s'agit d'un type numérique :

Instance

if (localStorage.clickcount)
{
    localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
    localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

objet sessionStorage

La méthode sessionStorage stocke les données d'une session. Lorsque l'utilisateur ferme la fenêtre du navigateur, les données seront stockées. être supprimé.

Comment créer et accéder à une sessionStorage :

Exemple

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

Ce qui précède est l'introduction au Web en HTML5 et l'analyse des éléments associés

.

【Recommandations associées】

Qu'est-ce qu'un fichier HTML ? Une compréhension préliminaire des fichiers HTML

Qu'est-ce que qu'est-ce que le HTML5 ? Quelles sont les caractéristiques et fonctionnalités du HTML5 ? Avantages et inconvénients ?

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!