Rumah >hujung hadapan web >tutorial js >Panduan Langkah demi Langkah untuk LocalStorage dan SessionStorage: Menyimpan Data di Bahagian Pelanggan

Panduan Langkah demi Langkah untuk LocalStorage dan SessionStorage: Menyimpan Data di Bahagian Pelanggan

PHPzasal: 2024-08-12 19:02:19988semak imbas

A Step-by-Step Guide to LocalStorage and SessionStorage: Storing Data on the Client Side

Pengenalan kepada Storan Web

Storan web ialah ciri yang berkuasa dalam penyemak imbas moden yang membolehkan anda menyimpan data secara langsung pada bahagian pelanggan. Data ini boleh disimpan walaupun selepas penyemak imbas ditutup (menggunakan LocalStorage) atau hanya semasa sesi (menggunakan SessionStorage). Alat ini tidak ternilai untuk menyimpan pilihan pengguna, data troli beli-belah dan jenis maklumat lain yang meningkatkan pengalaman pengguna.

Perbezaan Antara LocalStorage dan SessionStorage

Memahami perbezaan antara LocalStorage dan SessionStorage adalah kunci untuk menggunakannya dengan berkesan:

Storan Tempatan:
- Data kekal walaupun selepas penyemak imbas ditutup.
- Ia boleh digunakan untuk menyimpan data jangka panjang, seperti pilihan pengguna atau token.
- Data yang disimpan tidak mempunyai masa tamat tempoh dan kekal tersedia sehingga dipadamkan secara eksplisit.
Storan Sesi:
- Data hanya tersedia semasa sesi (iaitu, selagi tab atau tetingkap penyemak imbas dibuka).
- Setelah sesi tamat (tab ditutup), data dikosongkan secara automatik.
- Ia berguna untuk data sementara, seperti interaksi atau pilihan pengguna khusus sesi.

Menyimpan, Mendapatkan Semula dan Mengalih Keluar Data

Menggunakan LocalStorage dan SessionStorage adalah mudah. Di bawah ialah contoh yang menunjukkan cara menyimpan, mendapatkan semula dan mengalih keluar data.

// Storing data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionID', '123456');

// Retrieving data
const username = localStorage.getItem('username');
const sessionID = sessionStorage.getItem('sessionID');

// Removing data
localStorage.removeItem('username');
sessionStorage.removeItem('sessionID');

// Clearing all data
localStorage.clear();
sessionStorage.clear();

Contoh Dunia Nyata: Menyimpan Keutamaan Pengguna

Untuk mempraktikkan konsep ini, mari buat aplikasi web ringkas yang membolehkan pengguna memilih dan menyimpan tema pilihan mereka (terang atau gelap). Pilihan ini akan disimpan menggunakan LocalStorage supaya ia berterusan walaupun selepas penyemak imbas ditutup.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Selector</title>
  <style>
    body.light {
      background-color: white;
      color: black;
    }
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Theme Selector</h1>
  <button id="light">Light Theme</button>
  <button id="dark">Dark Theme</button>

  <script>
    const lightButton = document.getElementById('light');
    const darkButton = document.getElementById('dark');

    // Event listeners for theme selection
    lightButton.addEventListener('click', () => {
      document.body.className = 'light';
      localStorage.setItem('theme', 'light');
    });

    darkButton.addEventListener('click', () => {
      document.body.className = 'dark';
      localStorage.setItem('theme', 'dark');
    });

    // Load saved theme on page load
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.body.className = savedTheme;
    }
  </script>
</body>
</html>

Penjelasan:

Pemilihan Tema: Pengguna boleh memilih antara tema terang atau gelap dengan mengklik butang masing-masing.
Keutamaan Menyimpan: Apabila tema dipilih, ia disimpan dalam LocalStorage di bawah kekunci 'tema'.
Keutamaan Memuatkan: Apabila halaman dimuatkan, skrip menyemak LocalStorage untuk sebarang tema yang disimpan dan menggunakannya secara automatik.

Mengapa Menggunakan Storan Web?

Storan web menyediakan cara yang mudah dan cekap untuk meningkatkan pengalaman pengguna. Dengan menyimpan pilihan, sesi atau data lain yang diperlukan pada sisi pelanggan, anda boleh membuat aplikasi web yang lebih diperibadikan, responsif dan lancar. Memahami dan menggunakan LocalStorage dan SessionStorage akan membantu anda membina aplikasi yang lebih pintar yang memenuhi keperluan pengguna tanpa terlalu bergantung pada storan sebelah pelayan.

Kesimpulan

LocalStorage dan SessionStorage ialah alatan penting untuk mana-mana pembangun web. Mereka membenarkan anda menyimpan data secara langsung dalam penyemak imbas, menawarkan fleksibiliti dalam cara dan bila data itu tersedia. Sama ada anda perlu mengekalkan pilihan pengguna atau mengekalkan maklumat khusus sesi, storan web memberi anda kuasa untuk berbuat demikian dengan usaha yang minimum. Dengan menguasai alatan ini, anda boleh meningkatkan kefungsian dan pengalaman pengguna aplikasi web anda.

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk LocalStorage dan SessionStorage: Menyimpan Data di Bahagian Pelanggan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html for select Session using this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Prop Drilling in React: definisi dan contohArtikel seterusnya：Prop Drilling in React: definisi dan contoh

Artikel berkaitan

Lihat lagi