11486 sujets

JavaScript, DOM et API Web HTML5

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

Pages :
(reprise du message précédent)

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
Xan a écrit :
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. Smiley ohwell

Rien à voir, tu manipules du JS, donc tout est côté client, ça ne fonctionnera pas mieux sur un serveur distant.
Xan a écrit :
L'exemple avec localStorage c'est juste écrire "shadow*root (open)"?

Tu peux faire un "Imprim écran" pour voir ta console ?
"shadow*root (open)" est une donnée généré par Chrome dans le Dev Tools, pas présent dans ta page en réalité.
Tu peux également coller ton code ici ? Ou bien mettre ta page en ligne ?
Modifié par MatthieuR (21 Apr 2016 - 10:02)
MatthieuR a écrit :
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



Ca marche très bien sur chrome avec ce code, merci Smiley biggrin

Donc si je dis pas de bétise, localStorage c'est uniquement pour le local Smiley ohwell
MatthieuR a écrit :

Rien à voir, tu manipules du JS, donc tout est côté client, ça ne fonctionnera pas mieux sur un serveur distant.

Tu peux faire un "Imprim écran" pour voir ta console ?
"shadow*root (open)" est une donnée généré par Chrome dans le Dev Tools, pas présent dans ta page en réalité.
Tu peux également coller ton code ici ? Ou bien mettre ta page en ligne ?


Je vais faire un imprim ecran, mais c'est exactement comme ton code enfaite Smiley smile
Code html:

<!DOCTYPE html>
<html lang="en-GB">
<head>


<link rel='stylesheet' type ='text/css' href='Style.css'>
</head>

<body>


<button onclick="changeClasseTable()">Change</button>

<table id="maTable" class="table1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content A</td>
<td>Content B</td>
<td>Content C</td>
</tr>
<tr>
<td>Content A</td>
<td>Content B</td>
<td>Content C</td>
</tr>
<tr>
<td>Content A</td>
<td>Content B</td>
<td>Content C</td>
</tr>
<tr>
<td>Content A</td>
<td>Content B</td>
<td>Content C</td>
</tr>
</tbody>
<script type = "text/javascript" src="Cookies.js"></script>
<script type = "text/javascript" src="code.js"></script>
</table>

</html>
Sinon pour les codes css et js ce sont exactement les mêmes que toi Smiley smile

Edit: je fais des tests sur des tables simples comme ça, ( tant que ca marche pas sur un truc simple j'essaye pas sur plus complexe)

Mais ton nouveau code en local marche sur chrome à présent Smiley smile
Modifié par Xan (21 Apr 2016 - 10:18)
Donc là tout marche en local mais si je met sur un serveur ca marchera plus non ( avec localstorage)? Smiley cligne
Modifié par Xan (21 Apr 2016 - 10:25)
Xan a écrit :
Donc si je dis pas de bétise, localStorage c'est uniquement pour le local Smiley ohwell

Non pas pour le local, pour le client... Ça te permet de stocker des infos dans le navigateur de ton client, comme les cookies, pareil.
Si tu fais un script en JS, il ne fonctionne pas que en local, sur l'ordi du développeur..., quand tu mets ce script en ligne, sur un serveur distant, il fonctionne très bien sur tous les ordinateurs du monde, et heureusement. Pour les cookies ou localStorage c'est pareil, tu peux enregistrer une info sur tous les ordis du monde dès qu'ils chargent ton script.
Je sais pas si je suis clair, mais fais un test sur un serveur distant. Upload juste fichier sur un hébergement et teste, tu verras ça fonctionne...
Xan a écrit :
Donc là tout marche en local mais si je met sur un serveur ca marchera plus non ( avec localstorage)? Smiley cligne

Si ça fonctionnera exactement de la même manière que sur ton ordi actuellement !
Xan a écrit :
Donc là tout marche en local mais si je met sur un serveur ca marchera plus non ( avec localstorage)? Smiley cligne

Le local de localstorage veut dire que c'est sur la machine client que l'info est stockée.
Donc quand un client va se connecter sur ta page, ce sera ensuite sur sa machine, et ceci pour tous les clients.
Merci pour le code, mais c'est plutôt le JS qu'il me faut...
Tu charges encore Cookies.js ? Tu veux encore utiliser les cookies ou bien tu utilises localStorage ?
SolidSnake a écrit :

Le local de localstorage veut dire que c'est sur la machine client que l'info est stockée.
Donc quand un client va se connecter sur ta page, ce sera ensuite sur sa machine, et ceci pour tous les clients.


Ah d'accord, j'avais pas compris ça comme ça, (j'avais rien compris enfaite, je croyais que le local c'est juste chez soi, et pour les ordis en réseaux) je vais utiliser ça alors Smiley jap
MatthieuR a écrit :
Merci pour le code, mais c'est plutôt le JS qu'il me faut...
Tu charges encore Cookies.js ? Tu veux encore utiliser les cookies ou bien tu utilises localStorage ?


Le "code.js" c'est exactement comme ton code: (sinon le Cookies.js oui j'avais oublié de le supprimé avec ton nouveau code Smiley rolleyes )

function changeClasseTable(){

if (table.className == "table1")
{

table.className = "table2";
}else{
table.className = "table1";
}
//enregistrement du style nouvellement sélectionné dans localstorage
localStorage.setItem('table_style', table.className);
}
console.log(localStorage.getItem('test'));
//j'ai déplacé cette variable en dehors dela fonction pour qu'elle soit disponible tout le temps
var table = document.getElementById("maTable");
//si une entrée dans localStorage existe, je récupère la valeur du style ou bien par défaut c'est "table1"
var style = (localStorage.getItem('table_style') !== null) ? localStorage.getItem('table_style') : 'table1';
//on applique la classe stockée à la classe de la table
table.className = style;
$(table).fadeIn();
//c'est fait !
//change le style et recharge ta page maqique !
MatthieuR a écrit :
Merci pour le code, mais c'est plutôt le JS qu'il me faut...
Tu charges encore Cookies.js ? Tu veux encore utiliser les cookies ou bien tu utilises localStorage ?


Ca à l'air de marcher sur tout les navigateurs avec localStorage, donc je vais utiliser ca, car avec Cookies, sur chrome ca marche pas Smiley confus
MatthieuR a écrit :

Non pas pour le local, pour le client... Ça te permet de stocker des infos dans le navigateur de ton client, comme les cookies, pareil.
Si tu fais un script en JS, il ne fonctionne pas que en local, sur l'ordi du développeur..., quand tu mets ce script en ligne, sur un serveur distant, il fonctionne très bien sur tous les ordinateurs du monde, et heureusement. Pour les cookies ou localStorage c'est pareil, tu peux enregistrer une info sur tous les ordis du monde dès qu'ils chargent ton script.
Je sais pas si je suis clair, mais fais un test sur un serveur distant. Upload juste fichier sur un hébergement et teste, tu verras ça fonctionne...


J'avais pas vu ce commentaire, oui je n'avais pas compris au début, du coup localstorage c'est vraiment bien Smiley biggrin
Merci pour ton aide Smiley smile Smiley prie
Modifié par Xan (21 Apr 2016 - 10:45)
Xan a écrit :

Ca à l'air de marcher sur tout les navigateurs avec localStorage, donc je vais utiliser ca, car avec Cookies, sur chrome ca marche pas Smiley confus

Je peux t'assurer que sur Chrome, le script avec les cookies fonctionne parfaitement.
Il faut cependant lancer ta fonction uniquement quand le DOM est chargé, du coup il faut que tu inclus tout ton code (sauf les fonction) dans une fonction appelée à l'événement onload de window. Comme ça :
window.onload = function(){
  //j'ai déplacé cette variable en dehors dela fonction pour qu'elle soit disponible tout le temps
  table = document.getElementById("maTable");
  //si un cookie existe, je récupère la valeur du style ou bien par défaut c'est "table1"
  var style = (Cookies.get('table_style') !== undefined) ? Cookies.get('table_style') : 'table1';
  //on applique la classe stockée à la classe de la table
  table.className = style;
  //c'est fait !
  //change le style et recharge ta page maqique !
}

Bien sûr, il faut que tu sortes ta variable "table" de cette function pour la rendre globale, tu peux donc l'initialiser en début de fichier avec un var table; et tu ne remets pas "var" dans ta fonction...

Codepen le fait par défaut, il attend le chargement complet du DOM à chaque fois, c'est pour ça que de ton côté tu avais peut-être une erreur.

Preuve : http://alsacreations.matthieurebillard.fr/025/ Smiley cligne

EDIT : tu pourrais même éventuellement sortir la récupération du cookie de cette fonction, ça ne manipule pas le DOM donc on peut le charger plus tôt...
Modifié par MatthieuR (21 Apr 2016 - 11:14)
MatthieuR a écrit :

Je peux t'assurer que sur Chrome, le script avec les cookies fonctionne parfaitement.
Il faut cependant lancer ta fonction uniquement quand le DOM est chargé, du coup il faut que tu inclus tout ton code (sauf les fonction) dans une fonction appelée à l'événement onload de window. Comme ça :
window.onload = function(){
  //j'ai déplacé cette variable en dehors dela fonction pour qu'elle soit disponible tout le temps
  table = document.getElementById("maTable");
  //si un cookie existe, je récupère la valeur du style ou bien par défaut c'est "table1"
  var style = (Cookies.get('table_style') !== undefined) ? Cookies.get('table_style') : 'table1';
  //on applique la classe stockée à la classe de la table
  table.className = style;
  //c'est fait !
  //change le style et recharge ta page maqique !
}

Bien sûr, il faut que tu sortes ta variable "table" de cette function pour la rendre globale, tu peux donc l'initialiser en début de fichier avec un var table; et tu ne remets pas "var" dans ta fonction...

Codepen le fait par défaut, il attend le chargement complet du DOM à chaque fois, c'est pour ça que de ton côté tu avais peut-être une erreur.

Preuve : http://alsacreations.matthieurebillard.fr/025/ Smiley cligne

EDIT : tu pourrais même éventuellement sortir la récupération du cookie de cette fonction, ça ne manipule pas le DOM donc on peut le charger plus tôt...



Pour les cookies:
J'ai re-fais à l'instant tout comme toi, inspecter l'élément j'ai repris tout exactement pareil mêmes noms etc, chrome ne veut toujours pas (ca marche pour firefox, internet explorer). c'est fou Smiley biggol (peut être ca vient de mes paramètres sur chrome Smiley confus )

Mais là je vais utiliser localStorage où tout fonctionne bien sur chaque navigateur, merci pour ton aide et ton temps Smiley prie Smiley jap
Modifié par Xan (21 Apr 2016 - 11:39)
Sinon j'ai repéré un bug, en utilisant localStorage (exactement ton code), en lancant firefox, le premier style apparait (et c'est normal) alors que sur chrome c'est le deuxieme qui apparait en 1er ( ahlala les navigateurs.. Smiley biggol )

Edit: je pense mettre des conditions selon les navigateurs pour résoudre ce problème Smiley ohwell
Modifié par Xan (21 Apr 2016 - 15:17)
Pages :
Sujet clos
Aller à