Stockage Web HTML5
Stockage Web HTML5, une meilleure méthode de stockage local que les cookies.
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.
Prise en charge du navigateur
Internet Explorer 8+, Firefox, Opera, Chrome et Safari prennent en charge le stockage Web.
Remarque : Internet Explorer 7 et les versions antérieures d'IE ne prennent pas en charge le stockage Web
localStorage et sessionStorage
Il y a deux nouveaux objets. pour stocker des données sur le client :
localStorage - stockage de données sans limite de temps
sessionStorage - stockage de données pour une session
Avant d'utiliser le stockage Web, vous devez vérifier si le navigateur prend en charge localStorage et sessionStorage :
{
// Oui ! Prise en charge de localStorage et sessionStorage !
// Du code.....
}
else
{
// Désolé ! Pas de Web ! prise en charge du stockage..
}
Objet 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.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Exemple d'analyse :
Utilisez key="lastname" et value="Smith" pour créer une paire clé/valeur de stockage local
-
récupération La valeur avec la valeur clé "lastname" insère ensuite les données dans l'élément avec id="result"
Astuce : Paires clé/valeur sont généralement stockés sous forme de chaînes, vous pouvez convertir ce format selon vos besoins.
L'exemple suivant montre le nombre de fois où l'utilisateur a cliqué sur le bouton. Convertissez la valeur de chaîne dans le code en un type numérique :
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>Exécuter l'instance»
Cliquez sur « Exécuter Bouton « » d'instance pour afficher des exemples en ligne
Objet sessionStorage
La méthode sessionStorage stocke les données d'une session. Les données sont supprimées lorsque l'utilisateur ferme la fenêtre du navigateur.
Comment créer et accéder à une sessionStorage : :
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>Exécuter une instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher les instances en ligne
