Maison >interface Web >tutoriel HTML >Découvrir les fonctionnalités mystérieuses du stockage de sessions : découvrir ses utilisations cachées

Découvrir les fonctionnalités mystérieuses du stockage de sessions : découvrir ses utilisations cachées

WBOYoriginal: 2024-01-13 12:36:06904parcourir

La fonction secrète de SessionStorage révélée : pour comprendre ses utilisations cachées, des exemples de code spécifiques sont nécessaires

Introduction :
Dans le développement Web, nous utilisons souvent localStorage pour stocker des données, mais saviez-vous qu'il existe une API similaire ? sessionStockage? sessionStorage et localStorage sont très similaires, mais il existe quelques différences fonctionnelles. Cet article révélera les utilisations cachées de sessionStorage et vous aidera à mieux comprendre ses fonctionnalités et son utilisation à travers des exemples de code spécifiques.

Qu'est-ce que sessionStorage ?
sessionStorage fait partie de l'API Web Storage et est utilisé pour enregistrer les données au niveau de la session dans les navigateurs Web. Il s'agit d'un mécanisme de stockage temporaire. Les données ne sont valables que pendant la session en cours. À la fin de la session, les données seront automatiquement effacées. Ainsi, si vous devez conserver des données lorsque la page Web est actualisée ou rouverte, vous devez utiliser localStorage au lieu de sessionStorage.

Utilisation cachée : partage de données
sessionStorage ne se limite pas à la page actuelle, mais peut également partager des données entre différentes pages du même navigateur. Ceci est utile pour les applications qui nécessitent une communication de données sur plusieurs pages. Ce qui suit utilise un exemple de code spécifique pour illustrer cette utilisation :

Code HTML :

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="inputValue" />
   <button onclick="saveData()">保存数据</button>
   <button onclick="loadData()">加载数据</button>
</body>
</html>

Code JavaScript :

function saveData() {
   var inputValue = document.getElementById('inputValue').value;
   sessionStorage.setItem('data', inputValue);
   location.href = "https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6";
}

function loadData() {
   var data = sessionStorage.getItem('data');
   alert(data);
}

Dans le code ci-dessus, il y a une zone de saisie et deux boutons sur la page. Après avoir cliqué sur "Enregistrer les données". bouton , enregistrera la valeur dans la zone de saisie dans sessionStorage et passera à une autre page https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6. Dans la page https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6, cliquez sur le bouton "Load Data", les données enregistrées dans la première page seront lues depuis sessionStorage et affichées dans une pop-up.

Utilisation cachée deux : passage des paramètres de page
En plus du partage de données, sessionStorage peut également être utilisé comme moyen de transmettre des paramètres. Habituellement, nous utilisons les paramètres de requête de l'URL pour transmettre des paramètres, mais cela exposera la valeur du paramètre. L'utilisation de sessionStorage pour transmettre des paramètres peut garantir la sécurité des données tout en étant plus flexible et plus pratique. L'exemple de code suivant montre comment utiliser sessionStorage pour transmettre des paramètres :

Code HTML :

<!DOCTYPE html>
<html>
<body>
   <a href="https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6">页面跳转</a>
</body>
</html>

Code JavaScript :

var params = {
   name: 'Jack',
   age: 20
};
sessionStorage.setItem('params', JSON.stringify(params));

Dans le code ci-dessus, après avoir cliqué sur "Saut de page", une page contenant à la fois le nom et l'âge sera Les paramètres d'objet des paramètres sont enregistrés dans sessionStorage sous la forme d'une chaîne JSON. Dans la page https://www.php.cn/link/e05c7ba4e087beea9410929698dc41a6, les paramètres peuvent être lus des manières suivantes :

Code JavaScript :

var params = JSON.parse(sessionStorage.getItem('params'));
console.log(params.name); // 输出：Jack
console.log(params.age); // 输出：20

En utilisant sessionStorage pour transmettre les paramètres, nous pouvons mieux protéger la sécurité du paramètres, et en tenant compte de l'efficacité et de la flexibilité de la transmission des données.

Conclusion :
Cet article révèle deux utilisations cachées de sessionStorage : le partage de données et de paramètres de page, et l'explique en détail à travers des exemples de code. Bien que les scénarios d'utilisation de sessionStorage soient relativement restreints, il peut s'avérer d'une grande aide dans des scénarios d'application spécifiques. J'espère que cet article pourra vous aider à mieux comprendre et utiliser sessionStorage et à améliorer continuellement vos capacités de développement 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!

JavaScript json html 字符串对象

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：Alternatives viables à sessionStorageArticle suivant：Alternatives viables à sessionStorage

Articles Liés

Voir plus