Conseil rapide: Persister la boîte à cocher State après le rechargement de la page

Ce didacticiel montre comment faire des cases à cocher sur une page Web, n'oubliez pas leur état coché / non contrôlé même après un rafraîchissement de page ou une fermeture de navigateur. Ceci est réalisé à l'aide de l'API localStorage du navigateur, améliorant l'expérience utilisateur en préservant les préférences des utilisateurs.

La technique est particulièrement utile pour les paramètres tels que les préférences du site (par exemple, les liens d'ouverture dans de nouveaux onglets, les éléments cachés). Une démo est fournie à la fin.

Points clés:

• Les états de case à cocher persistants améliorent l'expérience utilisateur en se souvenant des sélections à travers les rechargements de page.
• localStorage dans JavaScript fournit un stockage persistant dans le navigateur de l'utilisateur, conservant les données même après la fermeture et la réouverture du navigateur.
• Une fonctionnalité "Vérifier / décocher tout" peut être ajoutée pour une sélection de vrac pratique, son état également stocké dans localStorage.
• localStorage convient aux données non sensibles; Évitez de stocker des informations d'identification ou des informations personnelles.

à cocher html:

Le HTML initial comprend des cases à cocher avec des étiquettes associées, regroupées pour la facilité de style:

<code class="language-html"><div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>
  <button>Check All</button>
</div></code>

Les étiquettes sont cruciales pour l'accessibilité, permettant la sélection via des clics d'étiquette.

javascript (en utilisant jQuery):

jQuery simplifie la manipulation DOM. Inclure-le via un CDN:

<code class="language-html"></code>

Le JavaScript gère l'état de la case à cocher modifie, les stocke en localStorage et les restaure sur le chargement de la page:

<code class="language-javascript">var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });
  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

$checkboxes.on("change", function(){
  updateStorage();
  updateButtonStatus();
});

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true);
  updateStorage();
  updateButtonStatus();
}

$button.on("click", handleButtonClick);


$.each(formValues, function(key, value) {
  if (key !== "buttonText") {
    $("#" + key).prop('checked', value);
  }
});

$button.text(formValues["buttonText"]);
</code>

Ce code gère efficacement le stockage et met à jour le texte du bouton "Vérifier tout".

Vérifiez / décochez toutes les fonctionnalités:

Le bouton "Vérifiez tout" fait basculer tous les états et mises à jour des boîtes à cocher localStorage.

démo:

Une démo de travail présentant le comportement persistant de la case à cocher est disponible [ici] (lien vers la démo de codepen - remplacer par un lien réel si disponible).

Conclusion:

Cette méthode exploite efficacement localStorage pour créer des cases à cocher persistantes, améliorer l'expérience utilisateur et fournir une implémentation propre d'une fonctionnalité "Vérifier / décocher All". N'oubliez pas que localStorage ne convient pas aux données sensibles. Les FAQ fournies offrent des éclaircissements supplémentaires sur divers aspects de cette technique.

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!