[Résolu] Sauvegarder les couleurs du tableau

Bonjour;
je suis débutant et j'ai du mal avec le js.
Je souhaite sauvegarder la couleur de mon tableau pour qu'un F5 ne réinitialise pas tout.
J'ai regardé pour mettre en place un localStorage mais je n'y arrive pas.
Avez-vous une solution qui peut marcher ?

Merci d'avance.


page index (En tout j'ai 5 tableau comme celui la)

	<!--Premier Tableau-->
	<table class="tg table5">
		  <tr>
	    <th colspan="2"></th>
	  </tr>
	  <tr>
	    <th class="rouge" onclick="changeCouleur(this)"></th>
	    <th class="rouge" onclick="changeCouleur(this)"></th>
	  </tr>
	</table>
		<script>
			//localStorage.setItem('', '');
			

			function changeCouleur(td){
				td.className = (td.className == "rouge") ? "vert" : "rouge";
				if (localStorage.className){
					localStorage.className = (localStorage.className == "rouge") ? "vert" : "rouge";
				} else {
					localStorage.className = "erreur";
				}
			}
		</script>
    </body>
</html>

page css

.rouge{
	background-color:red;
	opacity:0.33;
}
.vert{
	background-color:green;
	opacity:0.33;
}

Salut !

Deux chose m'ont l'air de manquer :

1/ L'initialisation

C'est bien se sauvegarder au click mais quand tu refresh le navigateur il n'y a rien pour dire "Si il y a un paramètre sauvegardé applique le" du coup l'état de départ ne change pas.

2/ Différencier les deux boutons

Tu sauvegardes l'état des deux bouton dans le meme storage. A mon avis il te faudrait un truc du genre localStorage.btn1_className et localStorage.btn2_className parceque la tu ne sauvegarde que le dernier état "vert" ou "rouge" mais tes deux boutons ont peut etre une couleur différente

Pour l’initialisation je suis d’accord il la manque je ne sais pas la mettre en place.

Le problème d'identifier les boutons c'est que j'en ai pas que deux, j'ai mis qu'un tableau mais en totalité je n'ai pas loin de 40 boutons qui doivent changer de couleur et chacun peut prendre une couleur différente (rouge ou vert).

Sans forcement utilisé un local storage j'aimerais savoir s'il existe une autre possibilité pour sauvegarder la couleur dès ses "boutons"

VicMeil a écrit :
Pour l’initialisation je suis d’accord il la manque je ne sais pas la mettre en place.

Un simple if tout comme dans ta fonction suffira

if (localStorage.className){
    // si il y a bien un paramètre alors on applique le changement
}

VicMeil a écrit :
Le problème d'identifier les boutons c'est que j'en ai pas que deux, j'ai mis qu'un tableau mais en totalité je n'ai pas loin de 40 boutons qui doivent changer de couleur et chacun peut prendre une couleur différente (rouge ou vert).

Effectivement, d'où l'utilité de les séparer. En l'état, si tu change 1 bouton tu ne va sauvegarder que "rouge" ou "vert" et à l'initialisation tu ne sauras pas lequel. Le plus simple, je pense, serait que tu sauvegardes une parie "id" + "class".

VicMeil a écrit :
Sans forcement utilisé un local storage j'aimerais savoir s'il existe une autre possibilité pour sauvegarder la couleur dès ses "boutons"

Pas de solution aussi simple en tout cas et même avec un autre moyen le soucis restera le même.

Est-ce que tu peux mettre des id sur tout tes boutons ?

<th id="bouton1" class="rouge" onclick="changeCouleur(this)"></th>
<th id="bouton2" class="rouge" onclick="changeCouleur(this)"></th>
// etc...

J'ai mis des id à tous et changer la Class par btn + numéro (la class="rouge") ne permettais seulement d'afficher rouge en état initial.

J'ai 42 id/class
Modifié par VicMeil (08 Mar 2021 - 13:00)

Ola !

Pour les classes il vaut mieux une classe commune. Comme on a les id, pas besoin de classe unique ici.
Bon du coup je t'ai fait un petit exemple qui devrait te faciliter la chose :

let btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
 if ( localStorage.getItem(btns[i].id) ) {
    btns[i].classList.add(localStorage.getItem(btns[i].id));
  } else {
    btns[i].classList.add("rouge");
  }
  document.getElementById("btn" + (i+1)).addEventListener("click", changeCouleur, false);
}

function changeCouleur(){
  this.classList.toggle("rouge");
  this.classList.toggle("vert");
  localStorage.setItem(this.id, this.classList.contains("rouge") ? "rouge" : "vert");
}

https://jsfiddle.net/undless/2Lhvbzw4/

Comment fonctionne-t-il, il permet de changer la couleur ?

J'ai essayé mais je n'ai qu'un élément qui se fix en rouge et rien d'autre ne se colore.

Super merci, tout fonctionne niquel

je cherchais vraiment a faire compliquer, en tout cas merci super solution
Modifié par VicMeil (09 Mar 2021 - 15:44)

VicMeil a écrit :
Super merci, tout fonctionne niquel

Parfait alors

VicMeil a écrit :
je cherchais vraiment a faire compliquer, en tout cas merci super solution

Non t'as fait au plus direct et au plus simple pour 1 bouton, il te manquait juste les finitions (eventListner principalement) et le passage à l'échelle pour gérer plusieurs boutons

Bonne aprem !