Explorez des scénarios d'application pratiques d'utilisation de sessionStorage pour stocker des données

Exploration de scénarios pratiques d'utilisation de sessionStrage pour stocker des données

Introduction

À mesure que les applications Web deviennent de plus en plus complexes, nous devons souvent enregistrer certaines données sur différentes pages ou lors de l'actualisation de la page. Cette exigence peut être facilement satisfaite en utilisant le sessionStorage du navigateur. Cet article explore plusieurs scénarios courants et fournit des exemples de code spécifiques. J'espère que cela pourra aider les lecteurs à mieux comprendre et appliquer sessionStorage.

1. Stockage des données du formulaire

Dans de nombreuses applications, nous devons souvent enregistrer les données du formulaire que les utilisateurs remplissent pour éviter la perte de données causée par une mauvaise utilisation de l'utilisateur ou par l'actualisation de la page. Cette fonctionnalité peut être facilement réalisée en utilisant sessionStorage.

Voici un exemple simple : supposons que nous ayons un formulaire avec deux zones de saisie : nom et âge. Lorsque l'utilisateur remplit le formulaire, nous enregistrons les données dans sessionStorage. Le code est le suivant :

// 获取表单元素
const form = document.querySelector('#myForm');
const nameInput = form.querySelector('#name');
const ageInput = form.querySelector('#age');

// 监听表单提交事件
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 获取用户输入的数据
  const name = nameInput.value;
  const age = ageInput.value;
  
  // 存储数据到 sessionStorage
  sessionStorage.setItem('name', name);
  sessionStorage.setItem('age', age);
});

Après une autre page ou après avoir actualisé la page en cours, nous pouvons utiliser le code suivant pour restaurer les données du formulaire précédemment enregistrées :

// 获取保存的数据
const savedName = sessionStorage.getItem('name');
const savedAge = sessionStorage.getItem('age');

// 恢复数据到表单中
nameInput.value = savedName;
ageInput.value = savedAge;

2. Stockage des données du panier

Un autre scénario d'application courant consiste à enregistrer les données du panier de l'utilisateur. Lorsqu'un utilisateur achète un produit sur le site Web, nous pouvons enregistrer les informations sur le produit dans sessionStorage afin que l'utilisateur puisse voir le produit précédemment sélectionné lorsqu'il accède à la page de paiement.

Voici un exemple simple : supposons que l'utilisateur puisse sélectionner un article dans la liste d'articles et ajouter l'article sélectionné au panier. Chaque fois que l'utilisateur sélectionne un produit, nous enregistrons les informations sur le produit dans sessionStorage. Le code est le suivant :

// 获取商品列表元素
const products = document.querySelectorAll('.product');

// 监听商品选择事件
products.forEach(function (product) {
  const btn = product.querySelector('button');
  btn.addEventListener('click', function () {
    // 获取商品信息
    const name = product.querySelector('.name').textContent;
    const price = product.querySelector('.price').textContent;
    
    // 获取购物车数据（如果有）
    const cart = JSON.parse(sessionStorage.getItem('cart')) || [];

    // 添加选择的商品到购物车
    cart.push({ name, price });

    // 更新购物车数据
    sessionStorage.setItem('cart', JSON.stringify(cart));
  });
});

Sur la page de paiement ou après avoir actualisé la page en cours, nous pouvons utiliser le code suivant pour obtenir les données du panier et les afficher à l'utilisateur :

// 获取购物车数据
const cart = JSON.parse(sessionStorage.getItem('cart'));

// 显示购物车数据
cart.forEach(function (item) {
  // 创建 DOM 元素，并显示数据
});

3. Stockage du statut de connexion de l'utilisateur

Le dernier scénario consiste à enregistrer le statut de connexion de l'utilisateur . Par exemple, une fois que l'utilisateur a saisi son nom d'utilisateur et son mot de passe sur la page de connexion, nous pouvons enregistrer l'état de connexion dans sessionStorage afin que l'utilisateur reste connecté tout en parcourant d'autres pages du site Web.

Ce qui suit est un exemple simple : en supposant qu'une fois que l'utilisateur s'est connecté avec succès sur la page de connexion, nous enregistrons le statut de connexion dans sessionStorage. Le code est le suivant :

// 监听登录表单提交事件
const form = document.querySelector('#loginForm');
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 获取用户输入的用户名和密码
  const username = form.querySelector('#username').value;
  const password = form.querySelector('#password').value;
  
  // 模拟登录验证
  const isLoggedIn = checkLogin(username, password);
  
  // 保存登录状态到 sessionStorage
  sessionStorage.setItem('isLoggedIn', isLoggedIn);
});

Dans d'autres pages, nous pouvons utiliser le code suivant pour vérifier le statut de connexion de l'utilisateur :

// 检查登录状态
const isLoggedIn = sessionStorage.getItem('isLoggedIn');

if (isLoggedIn) {
  // 用户已登录，执行相应的操作
} else {
  // 用户未登录，执行相应的操作
}

Conclusion

Grâce aux exemples de code ci-dessus de scénarios spécifiques, nous pouvons voir l'application pratique de sessionStorage dans développement web . Cela peut facilement nous aider à stocker et à restaurer des données, rendant l'expérience utilisateur plus conviviale. Bien entendu, sessionStorage présente également certaines limites. Par exemple, les données ne sont valides que jusqu'à la fermeture de la fenêtre actuelle du navigateur et les données de sessionStorage de chaque page sont indépendantes les unes des autres. Mais dans de nombreux scénarios, sessionStorage reste un outil très pratique et pratique.

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!