Terokai senario aplikasi praktikal menggunakan sessionStorage untuk menyimpan data

. Keperluan ini boleh dicapai dengan mudah menggunakan sessionStorage pelayar. Artikel ini meneroka beberapa senario biasa dan menyediakan contoh kod khusus. Saya harap ia dapat membantu pembaca lebih memahami dan menggunakan sessionStorage.

1. Penyimpanan data borang

Dalam banyak aplikasi, kami selalunya perlu menyimpan data borang yang pengguna isi untuk mengelakkan kehilangan data yang disebabkan oleh salah operasi pengguna atau muat semula halaman. Fungsi ini boleh dicapai dengan mudah menggunakan sessionStorage.

Berikut ialah contoh mudah: Katakan kita mempunyai borang dengan dua kotak input: nama dan umur. Apabila pengguna mengisi borang, kami menyimpan data ke sessionStorage. Kodnya adalah seperti berikut:

// 获取表单元素
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);
});

Selepas halaman lain atau memuat semula halaman semasa, kita boleh menggunakan kod berikut untuk memulihkan data borang yang disimpan sebelum ini:

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

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

2. Penyimpanan data troli beli-belah

Satu lagi senario aplikasi biasa ialah menyimpan data troli beli-belah pengguna. Apabila pengguna membeli produk di tapak web, kami boleh menyimpan maklumat produk ke sessionStorage supaya pengguna boleh melihat produk yang dipilih sebelum ini apabila dia pergi ke halaman pembayaran.

Berikut ialah contoh mudah: katakan pengguna boleh memilih item dalam senarai item dan menambah item yang dipilih pada troli beli-belah. Setiap kali pengguna memilih produk, kami menyimpan maklumat produk ke sessionStorage. Kod tersebut adalah seperti berikut:

// 获取商品列表元素
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));
  });
});

Pada halaman pembayaran atau selepas memuat semula halaman semasa, kami boleh menggunakan kod berikut untuk mendapatkan data troli beli-belah dan memaparkannya kepada pengguna:

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

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

3. Storan status log masuk pengguna

Senario terakhir adalah untuk menyimpan status log masuk pengguna . Sebagai contoh, selepas pengguna memasukkan nama pengguna dan kata laluan mereka pada halaman log masuk, kami boleh menyimpan status log masuk ke sessionStorage supaya pengguna kekal log masuk semasa menyemak imbas halaman lain tapak web.

Berikut ialah contoh mudah: dengan mengandaikan bahawa selepas pengguna berjaya log masuk pada halaman log masuk, kami menyimpan status log masuk ke sessionStorage. Kod tersebut adalah seperti berikut:

// 监听登录表单提交事件
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);
});

Di halaman lain, kita boleh menggunakan kod berikut untuk menyemak status log masuk pengguna:

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

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

Kesimpulan

Melalui contoh kod senario tertentu di atas, kita boleh melihat aplikasi praktikal sessionStorage dalam pembangunan web. Ia boleh membantu kami menyimpan dan memulihkan data dengan mudah, menjadikan pengalaman pengguna lebih mesra. Sudah tentu, sessionStorage juga mempunyai beberapa had Sebagai contoh, data hanya sah sehingga tetingkap penyemak imbas semasa ditutup, dan data sessionStorage setiap halaman adalah bebas antara satu sama lain. Tetapi dalam banyak senario, sessionStorage masih merupakan alat yang sangat mudah dan praktikal.

Atas ialah kandungan terperinci Terokai senario aplikasi praktikal menggunakan sessionStorage untuk menyimpan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!