Comment conserver l'état du menu lors du rechargement de la page : exploration des options de stockage

État de menu persistant lors du rechargement de la page

L'objectif est de maintenir l'état développé d'un bouton de menu lors du rechargement de la page. Pour y parvenir, envisagez d'utiliser localStorage pour stocker l'état du menu. Lors du chargement de la page, vérifiez si la variable localStorage existe et restaurez l'élément de menu correspondant à son état précédemment développé.

Implémentation

Utilisation de l'API de stockage jQuery

1. Inclure le plugin jQuery Storage API :

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

2. Initialiser localStorage :

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

3. Stockez l'état du menu :

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

4. Au chargement de la page, restaurez l'état du menu :

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

Avantages et inconvénients des emplacements de stockage

• localStorage : Persistant par navigateur, accessible par le même domaine, survit aux rechargements de page, adapté au stockage des préférences ou des paramètres de l'utilisateur.
• sessionStorage :Onglet temporaire par navigateur, perdu à la fermeture de l'onglet, adapté au stockage de données temporaires au cours d'une seule session de navigation.

Méthodes de stockage alternatives

• Cookies : Stockage côté serveur, accessible par domaine, capacité limitée.
• Base de données : Stockage côté serveur, nécessite la configuration et la connexion d'une base de données, adapté pour conserver les données spécifiques à l'utilisateur.

Remarque : L'emplacement de stockage spécifique peut varier en fonction des exigences de l'application et des considérations de performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!