Storan Tempatan lwn Storan Sesi: Bila Perlu Menggunakan Setiap (Dengan Projek Mini)

Pernahkah anda terfikir sama ada anda perlu menggunakan localStorage atau sessionStorage dalam aplikasi web anda? Anda tidak bersendirian!

Saya juga pernah ke sana – tertanya-tanya yang mana antara dua pilihan storan ini sesuai untuk bekas penggunaan saya.

Lihat, storan web bukanlah bahagian pembangunan web yang paling menarik tetapi penting untuk membina aplikasi web moden yang benar-benar melakukan sesuatu.

Jika anda ingin menyimpan pilihan pengguna, menggunakan data borang atau troli beli-belah, anda perlu memutuskan kaedah storan yang sesuai untuk kes penggunaan anda.

Saya tidak mahu menerangkan semua butiran kerana ia akan menjadi terlalu banyak teori dan kadangkala teori mengelirukan. Saya akan menunjukkan kepada anda kedua-dua storan dengan contoh kod sebenar.

Anda akan tahu bila hendak menggunakan penyelesaian yang mana pada penghujung siaran ini...

Jadi kekal dengan saya!

Asas: Perkara Yang Anda Perlu Tahu

localStorage adalah seperti buku nota dan sessionStorage adalah seperti timbunan nota melekit. Buku nota anda akan kekal bersama anda sehingga anda mengoyakkan halaman (data kosong), manakala nota melekit akan dibuang apabila anda menutup laci meja anda (sesi akhir).

Berikut ialah beberapa persamaan:

• Kedua-duanya menyimpan data dalam bentuk nilai kunci.

• Mereka memberi anda kira-kira 5-10MB storan (bergantung pada penyemak imbas)

• Ia segerak dan hanya menyimpan rentetan (ya, malah objek anda memerlukan penukaran JSON)

• Ia diakses melalui API mudah yang sama.

Sekarang, inilah perbezaannya:

Storan tempatan:

• Berdiri sehingga anda membersihkannya secara manual

• Data berterusan merentas tab dan tetingkap penyemak imbas

• Jangan mengekalkan sesuatu terlalu lama (seperti pilihan pengguna atau keadaan permainan yang disimpan)

Simpan sesi:

• Ia hilang apabila anda menutup tab penyemak imbas anda.

• Kekal terpencil ke tab khusus yang anda sedang bekerja

• Sesuai untuk data fana yang tidak sepatutnya berterusan (seperti keadaan bentuk atau token sekali sahaja)

Nota sampingan ringkas: Kedua-dua jenis storan adalah bahagian hadapan sahaja. Jangan gunakan data sensitif di sini — untuk storan hujung belakang yang selamat.

localStorage Deep Dive

Biar betul - anda mungkin menggunakan storan ini pada kebanyakan masa, dan atas sebab yang baik. Apabila anda memerlukan data untuk kekal di antara sesi penyemak imbas, tiada pilihan yang lebih baik daripada dengan localStorage.

Kes penggunaan terbaik untuk localStorage:

• Pilihan tema (mod gelap/cahaya)
• Barang dalam troli beli-belah
• Tetapan bahasa pengguna
• Kemajuan permainan
• Respons API dalam cache

Perhatian cepat - Saya telah melihat terlalu ramai pembangun mempelajari perkara ini dengan cara yang sukar:

• Jangan simpan data sensitif di sini (ia tidak selamat)
• Berhati-hati dengan had storan
• Ingat untuk menggunakan JSON.stringify sebelum menyimpan
• Berhati-hati dengan tamat tempoh - localStorage tidak tamat tempoh secara automatik

Izinkan saya memberi anda contoh konkrit dengan penukar tema yang sangat mudah.

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved theme on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
        themeToggle.checked = savedTheme === 'dark-mode';
    }
});

// Handle theme changes
themeToggle.addEventListener('change', () => {
    if (themeToggle.checked) {
        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    } else {
        body.classList.remove('dark-mode');
        localStorage.setItem('theme', 'light-mode');
    }
});

Kod ini agak mudah, ia akan menyimpan tema pilihan pengguna dan digunakan secara automatik apabila pengguna melawat semula. Tiada apa-apa yang mewah sekadar praktikal.

sessionStorage

Kadangkala anda memerlukan data untuk disimpan hanya untuk seketika - di situlah sessionStorage bersinar.

Fikirkan masa anda ingin menjejaki sesuatu sehingga pengguna anda menutup tab penyemak imbas mereka, dan bukan sesaat lagi.

Senario yang sempurna untuk sessionStorage:

• Data borang berbilang langkah
• Token pengesahan sementara
• Keutamaan pengguna sesi tunggal
• Kedudukan halaman dalam artikel yang panjang
• Pelajar atau kemajuan tutorial

Berikut ialah kod borang berbilang langkah kami yang menunjukkan sessionStorage dalam tindakan:

// Multi-Step Form Mini-Project
const formSteps = {
    saveStep(stepNumber, data) {
        sessionStorage.setItem(`formStep${stepNumber}`, JSON.stringify(data));
    },

    loadStep(stepNumber) {
        const savedData = sessionStorage.getItem(`formStep${stepNumber}`);
        return savedData ? JSON.parse(savedData) : null;
    },

    clearForm() {
        // Clear only our form data, not other sessionStorage items
        for (let i = 1; i  {
    e.preventDefault();
    const data = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    formSteps.saveStep(1, data);
    // Move to next step
});

// Load saved data when user returns to a step
window.addEventListener('load', () => {
    const step1Data = formSteps.loadStep(1);
    if (step1Data) {
        document.getElementById('name').value = step1Data.name;
        document.getElementById('email').value = step1Data.email;
    }
});

Kuncinya di sini ialah jika seseorang menutup tab secara tidak sengaja, mereka akan mula baharu - tiada data basi yang berkeliaran. Tetapi jika mereka hanya menavigasi antara langkah, kemajuan mereka selamat.

Membuat Pilihan Yang Tepat

Mari kita mengejar - inilah perkara yang harus mendorong keputusan storan anda:

Pilih localStorage apabila:

• Pengguna mengharapkan data mereka berterusan (seperti pilihan yang disimpan)
• Anda menyimpan data dalam cache yang tidak kerap berubah
• Anda memerlukan data dikongsi antara tab
• Kemudahan pengguna mengatasi kesegaran data

Pergi dengan sessionStorage apabila:

• Data hendaklah bersifat sementara mengikut reka bentuk
• Anda mengendalikan token sementara yang sensitif
• Setiap tab memerlukan keadaan terpencilnya sendiri
• Anda mahukan jaminan bersih semasa dimulakan semula

Petua prestasi yang sebenarnya penting:

• Jangan simpan objek besar - kedua-dua jenis storan adalah segerak
• Batch operasi storan anda apabila boleh
• Ingat had 5-10MB
• Sentiasa mengendalikan ralat storan (pengguna mungkin telah melumpuhkannya)

Gotcha Biasa:

• Sentiasa rentetan objek sebelum menyimpan
• Jangan anggap storan tersedia
• Berhati-hati dengan acara storan dalam senario berbilang tab
• Ingat untuk membersihkan data lama/tidak digunakan

Pemikiran akhir: Pilih alat yang betul untuk kerja yang betul. localStorage tidak selalunya lebih baik hanya kerana ia berterusan, dan sessionStorage tidak selalunya lebih baik hanya kerana ia lebih bersih. Fikirkan keperluan pengguna anda dahulu.

Apabila ragu-ragu, tanya diri anda:
"Adakah data ini perlu bertahan apabila penyemak imbas dimulakan semula?"

• Ya → Storan tempatan
• Tiada → sessionStorage

Itu sahaja yang anda perlu tahu untuk membuat pilihan yang tepat. Mula membina!

Atas ialah kandungan terperinci Storan Tempatan lwn Storan Sesi: Bila Perlu Menggunakan Setiap (Dengan Projek Mini). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!