[Résolu] Conservation du style en actualisant la page (cookie?)

Bonjour, je bug encore sur un problème

J'ai ça:
Quand je clique sur un bouton, le css change sur ma page, à l'aide d'un code javascript.

Le problème c'est que lorsque j'actualise (f5) la page, je retrouve l'ancien css (avant le clique sur le bouton) alors que je veux que le style reste. (j'ai lu qu'il fallait utiliser un cookie mais j'y connais rien )

Voila le code du changement de style (oui on m'avait déja aidé ici pour ca ):
http://codepen.io/JUSEN/pen/vGjYRB

Un dessin pour récapitulé:



Merci d'avance
Modifié par Xan (21 Apr 2016 - 10:46)

Salut,

En effet, ce type de choix de personnalisation chez l’utilisateur doit se faire via l'enregistrement d'un cookie sur le navigateur du client.
Tu as de la chance, les cookies sont accessibles par PHP mais aussi en JS !
Ils sont cependant plus facilement accessibles en PHP. Utilises-tu un langage serveur dans ton projet, genre PHP ?

MatthieuR a écrit :
Salut,

En effet, ce type de choix de personnalisation chez l’utilisateur doit se faire via l'enregistrement d'un cookie sur le navigateur du client.
Tu as de la chance, les cookies sont accessibles par PHP mais aussi en JS !
Ils sont cependant plus facilement accessibles en PHP. Utilises-tu un langage serveur dans ton projet, genre PHP ?

Merci de ta réponse
Ok, non, il faudrait que j'utilise un script javascript

Ok, pas de problème, c'est possible.
Soit tu utilises une petite lib, celle-là est pas mal : https://github.com/ScottHamper/Cookies
Soit tu codes tout à la mano et je te laisse voir comment ça fonctionne : https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/les-cookies-1

Dans cet exemple je m'appuie sur la lib dont je te parle juste avant, je ne suis pas du genre à recoder un truc un peu chiant juste pour le plaisir...

Change de style et rafraîchi ta page, le style se ré-applique ! Magique non !

EDIT : si tu veux voir tes cookies, ils sont dispos dans ton navigateur :

Et bien sûr tu peux paramétrer la durée d'expiration :

Cookies.set('key', 'value', { expires: 31536000 });//1 an en secondes

Modifié par MatthieuR (20 Apr 2016 - 16:19)

MatthieuR a écrit :
Ok, pas de problème, c'est possible.
Soit tu utilises une petite lib, celle-là est pas mal : https://github.com/ScottHamper/Cookies
Soit tu codes tout à la mano et je te laisse voir comment ça fonctionne : https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/les-cookies-1

Dans cet exemple je m'appuie sur la lib dont je te parle juste avant, je ne suis pas du genre à recoder un truc un peu chiant juste pour le plaisir...

Change de style et rafraîchi ta page, le style se ré-applique ! Magique non !

EDIT : si tu veux voir tes cookies, ils sont dispos dans ton navigateur :
upload/56501-cookies.png
Et bien sûr tu peux paramétrer la durée d'expiration :

Cookies.set('key', 'value', { expires: 31536000 });//1 an en secondes

Merci à toi,j'étais bien bloqué
Elle est super cette lib, je vais l'utiliser
Codé avec pleins de commentaires qui expliquent en plus, merci t'es au top

Utilises cette librairie sans hésitation, ça ne t'empêche pas d'aller voir quand même comment JS manipule les cookies, pour que tu comprennes.

MatthieuR a écrit :
Utilises cette librairie sans hésitation, ça ne t'empêche pas d'aller voir quand même comment JS manipule les cookies, pour que tu comprennes.

Oui merci

J'ai chargé la librairie:
<script type = "text/javascript" src="Cookies.js"></script>

mais bizarrement ça ne marche pas

J'édit mon message, enfaite ça marche sur firefox mais pas sur chrome
Modifié par Xan (20 Apr 2016 - 18:10)

Bonjour,

Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.

SolidSnake a écrit :
Bonjour,

Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.

Je ne connais pas mais je vais regarder aussi, merci

Matieu: Enfaite je viens de réaliser que le code ne marche pas sur chrome mais marche sur firefox

Si vous voyez une solution à ce problème..

Xan a écrit :
Je ne connais pas mais je vais regarder aussi, merci

Voici un petit aperçu http://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html

@Solidsnake : carrément, localstorage serait tout à fait adapté. J'étais resté sur les cookies car je pensais à l'éventualité d'en faire une utilisation côté serveur, mais dans ce cas, en effet il vaut mieux utiliser localstorage, vachement plus simple à utiliser !

@Xan : je ne comprends pas trop pourquoi ça ne fonctionne pas... La démo sur Codepen fonctionne sur Chrome en tous cas. Qu'est-ce qui ne fonctionne pas ? Tu as des erreurs dans ta console ?
Et si tu veux, bascule simplement sur localstorage...

Tu charges la lib par npm ou bien tu l'as téléchargée ?
Le lien de téléchargement est là : https://raw.githubusercontent.com/ScottHamper/Cookies/1.2.2/dist/cookies.min.js

Je viens de voir que j'avais une petite erreur au test du 'undefined' : il faut enlever les quotes puisque je fais une comparaison stricte (!==) et undefined est une constante, comme false, true...

MatthieuR a écrit :
Tu charges la lib par npm ou bien tu l'as téléchargée ?
Le lien de téléchargement est là : https://raw.githubusercontent.com/ScottHamper/Cookies/1.2.2/dist/cookies.min.js

Je viens de voir que j'avais une petite erreur au test du 'undefined' : il faut enlever les quotes puisque je fais une comparaison stricte (!==) et undefined est une constante, comme false, true...

C'est bizarre en enlevant les quotes, j'ai cru que ca avait l'air de marcher sur chrome et en retestant ensuite ca marchait plus c'est fou ( et sinon pour répondre je télécharge la lib en copiant le code dans un fichier js )

Edit: Ca marche même sur internet explorer mais pas sur chrome
Modifié par Xan (21 Apr 2016 - 01:23)

SolidSnake a écrit :
Pourquoi ne pas utiliser localstorage pour ça ? C'est plus simple et pas de nouvelle librairie à charger.

C'est exactement la solution que j'avais adopté pour cette page (voir le code source dans la page) : Scriptura, Themes

MatthieuR a écrit :
@Solidsnake : carrément, localstorage serait tout à fait adapté. J'étais resté sur les cookies car je pensais à l'éventualité d'en faire une utilisation côté serveur, mais dans ce cas, en effet il vaut mieux utiliser localstorage, vachement plus simple à utiliser !

@Xan : je ne comprends pas trop pourquoi ça ne fonctionne pas... La démo sur Codepen fonctionne sur Chrome en tous cas. Qu'est-ce qui ne fonctionne pas ? Tu as des erreurs dans ta console ?
Et si tu veux, bascule simplement sur localstorage...

Enfaite sur chrome, en rafraîchissant la page, cela affiche le 1er style de tableau (comme si il n'y avait pas le script )
Il n'y a pas d'erreur enfin je ne pense pas, comment voir la console sur une page web?

Olivier C a écrit :

C'est exactement la solution que j'avais adopté pour cette page (voir le code source dans la page) : Scriptura, Themes

Quels sont les lignes de ce code source dois je regarder?

Xan a écrit :

Il n'y a pas d'erreur enfin je ne pense pas, comment voir la console sur une page web?

Ah et bien tu appuies sur la touche F12
Par exemple dans Chrome, tu auras ça :

Pour afficher/masquer la console tu appuies sur "Esc". C'est la base pour débuguer du JS.

Sinon, vraiment plus simplement, tourne-toi vers localstorage, plus simple à manipuler si tu n'as pas besoin de mettre en commun des cookies entre différents langages.
Voici le même exemple qu'avant avec localStorage, du coup sans aucun chergement de lib externe.
Tu peux débuguer et voir les données stockées dans l'onglet Resources de ton "Dev Tools" (F12)

MatthieuR a écrit :

Ah et bien tu appuies sur la touche F12
Par exemple dans Chrome, tu auras ça :
upload/56501-console.png
Pour afficher/masquer la console tu appuies sur "Esc". C'est la base pour débuguer du JS.

Sinon, vraiment plus simplement, tourne-toi vers localstorage, plus simple à manipuler si tu n'as pas besoin de mettre en commun des cookies entre différents langages.
Voici le même exemple qu'avant avec localStorage, du coup sans aucun chergement de lib externe.
Tu peux débuguer et voir les données stockées dans l'onglet Resources de ton "Dev Tools" (F12)

Merci, apparemment il n'y a aucune erreur, sinon on m'a dit que pour chrome ça devrait marcher sur serveur mais pas en local, mais je sais pas si c'est juste.
L'exemple avec localStorage c'est juste écrire "shadow*root (open)"?
Modifié par Xan (21 Apr 2016 - 09:55)

Tu auras par contre, que se soit avec des cookies ou avec localStorage, un petit temps de latence de l'affichage de ton style personnalisé puisque tu le charges en JS, donc après ton HTML et après l'application du style.
Tu auras donc l'affichage par défaut brièvement puis le changement de classe et l'application du style.
Pour pallier un peu à petit problème, tu peux envisager un affichage retardé que lorsque ta classe est modifiée.
Tu peux voir sur le pen mis à jour : http://codepen.io/korell/pen/VadJYX