Storan Tempatan lwn Storan Sesi: Bila Perlu Menggunakan Setiap (Dengan Projek Mini)-tutorial js-php.cn

Local Storage vs Session Storage: When to Use Each (With Mini Projects)

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');
    }
});

Salin selepas log masuk

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 <= 3; i++) {
            sessionStorage.removeItem(`formStep${i}`);
        }
    }
};

// Example usage in form steps
document.getElementById('step1-form').addEventListener('submit', (e) => {
    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;
    }
});

Salin selepas log masuk

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!