Cara Mengekalkan Keadaan Menu pada Muat Semula Halaman: Meneroka Pilihan Storan

Keadaan Menu Berterusan pada Muat Semula Halaman

Matlamatnya adalah untuk mengekalkan keadaan dikembangkan butang menu pada muat semula halaman. Untuk mencapai ini, pertimbangkan untuk menggunakan localStorage untuk menyimpan keadaan menu. Setelah halaman dimuatkan, semak sama ada pembolehubah localStorage wujud dan pulihkan item menu yang sepadan kepada keadaan yang telah dikembangkan sebelumnya.

Pelaksanaan

Menggunakan jQuery Storage API

1. Sertakan pemalam jQuery Storage API:

<code class="html"><script src="https://github.com/julien-maurel/jQuery-Storage-API/blob/master/jquery.storageapi.js"></script></code>

2. Inisialisasi localStorage:

<code class="javascript">$(function () {
    $.storage.init(); 
});</code>

3. Simpan keadaan menu:

<code class="javascript">var menuState = {
    expandedItem: "..."
}
$.storage.set("menuState", menuState);</code>

4. Pada pemuatan halaman, pulihkan keadaan menu:

<code class="javascript">$(function () {
    ...
    var menuState = $.storage.get("menuState");
    if (menuState) {
        var expandedItem = menuState.expandedItem;
        $("#" + expandedItem).addClass("clicked hovered");
    }
});</code>

Kebaikan dan Keburukan Lokasi Storan

• localStorage: Berterusan bagi setiap penyemak imbas, boleh diakses oleh domain yang sama, bertahan dari muat semula halaman, sesuai untuk menyimpan pilihan atau tetapan pengguna.
• sessionStorage: Sementara bagi setiap tab penyemak imbas, hilang pada penutupan tab, sesuai untuk menyimpan data sementara dalam satu sesi penyemakan imbas.

Kaedah Storan Alternatif

• Kuki: Storan sebelah pelayan, boleh diakses mengikut domain, kapasiti terhad.
• Pangkalan data: Storan sebelah pelayan, memerlukan persediaan pangkalan data dan sambungan, sesuai untuk mengekalkan data khusus pengguna.

Nota: Lokasi storan khusus mungkin berbeza-beza berdasarkan keperluan aplikasi dan pertimbangan prestasi.

Atas ialah kandungan terperinci Cara Mengekalkan Keadaan Menu pada Muat Semula Halaman: Meneroka Pilihan Storan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!