Découvrir les fonctionnalités mystérieuses du stockage de sessions : découvrir ses utilisations cachées-tutoriel HTML-php.cn

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

WBOY

Libérer： 2024-01-13 12:36:06

original

800 Les gens l'ont consulté

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

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>

Copier après la connexion

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);
}

Copier après la connexion

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>

Copier après la connexion

Code JavaScript :

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

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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