Garder des données javascript d'une page à l'autre

[IzumiRK]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://ins-schools.forumactif.com/

Description du problème

Bonjour

J'ai quelques petits soucis avec un code que je fais parce que ça implique du javascript que je ne maîtrise pas (mes notions en la matière sont un peu limitées on va pas se mentir ^^')

J'ai deux infos sur mon forum qui sont changées par une action javascript : le div à côté de la bannière qui change en cliquant sur une des trois images, et les onglets du bloc PA.

En gros, cliquer sur la première image passe en display:block un div et cache les deux autres, etc. Le problème, c'est que le changement ne reste pas quand on change de page, et que j'aimerais bien, au contraire, que ça reste =/ J'ai cru comprendre que ça fonctionnait avec localStorage mais je sais pas du tout comment l'implémenter. Pareil pour les onglets  qui se remettent systématiquement sur l'onglet 1 en actualisant la page du coup.
(Note : quand je parle d'onglets PA je parle pas de séparation des catégories en onglets, j'ai déjà un code pour ça, mais du tableau sous la bannière)

Mes codes pour l'instant ressemblent à ça :

div haut de page:

Onglets PA:

Voilà, si quelqu'un a un petit moment pour m'expliquer comment ça fonctionne j'en serais infiniment reconnaissante parce que ça m'embêterait de devoir laisser cette idée de côté =(

Merci d'avance et bonne journée =)

[Toryudo]

Bonjour !

Commençons par le premier script pour le div à côté de la bannière.
Ce qu'on va vouloir faire, c'est créer une première variable localStorage 'pays' qui va contenir une valeur différente en fonction du bouton sur lequel on aura cliqué. Pour ça, on fait juste un localStorage.setItem('pays', 'CANADA'); dans les 3 fonctions que vous avez créé, et on change à chaque fois la valeur du deuxième paramètre :

div haut de page:

Et après les déclarations des fonctions, on fait un test sur la valeur de ce localStorage 'pays' : si c'est CANADA, on appelle la fonction CANADA() pour afficher ottawa1 et ottawa2 et masquer le reste. Si c'est SUEDE, on appelle la fonction SUEDE()... et si ce n'est ni l'un ni l'autre, on appelle par défaut la fonction AUTRE(). Ainsi, à chaque chargement de page, on appellera la dernière fonction qui a été appelée parce qu'on aura sauvegardé la valeur dans le localStorage 'pays'.


Pour le deuxième script maintenant, on va faire de la même façon avec une deuxième localStorage qu'on va appeler 'onglets' cette fois. Un peu plus compliqué avec la façon dont est écrit ce script, alors on va commencer par le réécrire de façon à nous arranger : encore avec une fonction.

Onglets PA:

On sauvegarde cette fois l'id de l'onglet sur lequel on a cliqué, et on rajoute une dernière ligne changeOnglet(localStorage.getItem('onglets')); pour appeler la fonction avec le dernier onglet sauvegardé dans le localStorage.
Avec ça, tout fonctionne comme vous le voulez normalement !

[IzumiRK]

Merci ! ^-^

Le deuxième marche mais le premier n'a pas l'air de fonctionner. Peut-être que ce serait plus simple si je crée une class pour masquer/afficher comme avec les onglets ?

[Toryudo]

Bonjour,
Je ne vois pas les modifications sur votre forum, est-ce que vous pourriez les appliquer ou me dire où est-ce que vous testez ces scripts, afin que je puisse regarder ce qui ne va pas ?

Merci !

[IzumiRK]

Ah oui pardon, entre temps j'ai déplacé le design sur l'adresse du vrai forum ^^'

J'ai changé le lien sur le post original
https://ins-schools.forumactif.com

[Toryudo]

Bonjour !

D'accord, je viens de m'apercevoir d'une chose : pour le div haut de page, votre code est à la fois dans un js et à la fois dans un template. Je n'avais vu que celui du template à la base, et le code que je fournis fonctionnerait pour le template. Du coup, il va falloir que vous supprimiez l'un des deux, et en fonction de celui que vous garderez, voici les codes correspondants :

Code du template :

Code:

<script type="text/javascript">
function CANADA(){
  document.getElementById("ottawa1").style.display="block";
  document.getElementById("ottawa2").style.display="inline";
  document.getElementById("malmo1").style.display="none";
  document.getElementById("malmo2").style.display="none";
  document.getElementById("autre").style.display="none";
  localStorage.setItem('pays', 'CANADA');
}
 
function SUEDE(){
  document.getElementById("ottawa1").style.display="none";
  document.getElementById("ottawa2").style.display="none";
  document.getElementById("malmo1").style.display="block";
  document.getElementById("malmo2").style.display="inline";
  document.getElementById("autre").style.display="none";
  localStorage.setItem('pays', 'SUEDE');
}
 
function AUTRE(){
  document.getElementById("ottawa1").style.display="none";
  document.getElementById("ottawa2").style.display="none";
  document.getElementById("malmo1").style.display="none";
  document.getElementById("malmo2").style.display="none";
  document.getElementById("autre").style.display="block";
  localStorage.setItem('pays', 'AUTRE');
}
 
switch (localStorage.getItem('pays')){
  case 'CANADA' : CANADA(); break;
  case 'SUEDE' : SUEDE(); break;
  default : AUTRE();
}
</script>

Code du js :

Code:

function CANADA(){
  document.getElementById("ottawa1").style.display="block";
  document.getElementById("ottawa2").style.display="inline";
  document.getElementById("malmo1").style.display="none";
  document.getElementById("malmo2").style.display="none";
  document.getElementById("autre").style.display="none";
  localStorage.setItem('pays', 'CANADA');
}
 
function SUEDE(){
  document.getElementById("ottawa1").style.display="none";
  document.getElementById("ottawa2").style.display="none";
  document.getElementById("malmo1").style.display="block";
  document.getElementById("malmo2").style.display="inline";
  document.getElementById("autre").style.display="none";
  localStorage.setItem('pays', 'SUEDE');
}
 
function AUTRE(){
  document.getElementById("ottawa1").style.display="none";
  document.getElementById("ottawa2").style.display="none";
  document.getElementById("malmo1").style.display="none";
  document.getElementById("malmo2").style.display="none";
  document.getElementById("autre").style.display="block";
  localStorage.setItem('pays', 'AUTRE');
}
$(function () {
  switch (localStorage.getItem('pays')){
      case 'CANADA' : CANADA(); break;
      case 'SUEDE' : SUEDE(); break;
      default : AUTRE();
  }
});


Je conseillerais plutôt la méthode template, mais si c'est plus pratique pour vous d'avoir tout dans le js pour ne pas oublier, prenez la méthode js ! La seule différence entre les deux, c'est que pour la méthode js, vous pourriez avoir un effet "switch visible au moment du chargement du script", comme si le div par défaut apparaissait, puis était remplacé par le dernier cliqué. Alors que pour la méthode template, ce serait instantané, vous ne verriez que le dernier cliqué et ce serait plus propre !

[IzumiRK]

Comme ça n'avait pas l'air de fonctionner, j'ai décidé de tenter en le mettant en code javascript via les modules du forum, j'ai dû oublier d'enlever l'un des deux

En tout cas maintenant ça fonctionne (alors que le code est le même a priori), du coup je sais pas ce qui clochait la première fois que j'ai tenté (peut-être un problème de cache dans le navigateur)

Merci beaucoup du coup de main ! =)