[Résolu] Injecter style sur balise HTML depuis localStorage

Bonjour,

J'ai créé une fonction qui permet de modifier des couleurs via des curseurs et des variables CSS.

Les valeurs sont stockées avec localStorage et je les injecte depuis le head sur la balise HTML pour les conserver lors du changement de page :

	if (localStorage.primary_h) document.documentElement.style.setProperty("--primary_h", localStorage.primary_h);
	if (localStorage.primary_s) document.documentElement.style.setProperty("--primary_s", localStorage.primary_s);
	if (localStorage.primary_l) document.documentElement.style.setProperty("--primary_l", localStorage.primary_l);

Plutôt que de devoir écrire une condition pour chaque clé, je pensais utiliser l'instruction for.
J'arrive à récupérer les couples clé/valeur :

	for (let i = 0; i < localStorage.length; i++) {
		const cle = localStorage.key(i);
		const valeur = localStorage.getItem(cle);
		console.log("--" + cle + ": " + valeur);
	}

Mais je suis incapable de les injecter sur la balise HTML :

	for (let i = 0; i < localStorage.length; i++) {
		const cle = localStorage.key(i);
		const valeur = localStorage.getItem(cle);
		document.documentElement.style.setProperty("--" + cle, valeur);
	}

Modifié par cabot (20 Feb 2022 - 16:42)

Salut,

Chez moi ton code marche bien :
https://jsfiddle.net/fvsj2xhz/

Un grand merci pour ta réponse, effectivement ça fonctionne.
Je ne sais pas ce que j'ai bien pu bricoler hier si ce n'est que j'ai passé deux heures à tourner en boucle sans résultat. o0