Panduan Langkah demi Langkah untuk LocalStorage dan SessionStorage: Menyimpan Data di Bahagian Pelanggan-tutorial js-php.cn

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

PHPz

Lepaskan： 2024-08-12 19:02:19

asal

970 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!