Récupération de données entre pages HTML
Résolu
Raviolito
-
Raviolito -
Raviolito -
A voir également:
- Récupération de données entre pages HTML
- Supprimer les données de navigation - Guide
- Editeur html - Télécharger - HTML
- Impossible de supprimer une page word - Guide
- Recuperation de données - Guide
- Convertisseur récupération de texte - Guide
4 réponses
Bonjour
Plutôt que d'utiliser les cookies
Je t'invite à utiliser le localstorage.
Tu trouveras, sans aucune difficulté, des tutoriels qui t'explique rond comment l'utiliser. ( Je précise que c'est très simple )
Plutôt que d'utiliser les cookies
Je t'invite à utiliser le localstorage.
Tu trouveras, sans aucune difficulté, des tutoriels qui t'explique rond comment l'utiliser. ( Je précise que c'est très simple )
En plus, ton code n'est pas terrible.
pourquoi dupliquer du code, alors qu'il suffit de passer un paramètre.
Donc :
côté html
et pour recharger les couleurs déjà sauvegardées
pourquoi dupliquer du code, alors qu'il suffit de passer un paramètre.
Donc :
côté html
<button onclick = "changeColor('black','gainsboro');"></button> <button onclick = "changeColor('MidnightBlue','gainsboro');"></button> <button onclick = "changeColor('black,'firebrick');"></button> <button onclick = "changeColor('gainsboro','black')"></button>
function changeColor(bgcolor,fontcolor) { document.body.style.background = bgcolor; document.body.style.color = fontcolor; localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé); localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé); }
et pour recharger les couleurs déjà sauvegardées
//code qui s'executera lorsque la page sera finie de charger (function(){ document.body.style.background = localStorage.getItem('bgcolor'); document.body.style.color = localStorage.getItem('fontcolor'); })();
Effectivement il n'était pas optimisé...
Le localstorage fonctionne, par contre quand je rentre la dernière fonction pour récupérer les données, les boutons ne fonctionnent plus.
Le localstorage fonctionne, par contre quand je rentre la dernière fonction pour récupérer les données, les boutons ne fonctionnent plus.
Sans voir exactement ce que tu as codé impossible de te répondre...
Nb: avant de poster ton code, merci de lire entièrement le contenu du lien suivant
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Nb: avant de poster ton code, merci de lire entièrement le contenu du lien suivant
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
Voici mon code.
<!DOCTYPE html> <html> <head> <title>COULEUR</title> <meta charset="utf-8" /> <link rel="icon" href="ico.gif" type="image/gif"> <style> .font{ font-family:sans-serif; font-variant: small-caps; } .BandeMenuHaut { border-bottom: 1px solid ; display: block; height: 50px; width: 100%; position: fixed; margin-top: 0px; top: 0px; left: 0px; right: 0px; } .custom { border-right: 1px solid ; border-left: 1px solid ; display: block; height: 50px; width: 33.3333%; position: fixed; margin-top: 0px; top: 0px; left: 33.3%; right: 0px; } .text_custom{ display: flex; justify-content: space-around; font-size: 15px; z-index: 2; margin-left:33.3333%; margin-right:33.3333%; font-family: monospace; } .zone_custom{ display: flex; justify-content: space-around; z-index: 1; } .case_custom{ display: flex; justify-content: space-around; } .trait_custom_1{ border-right: 1px solid ; border-left: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 33.3%; right: 0px; z-index: 0; } .trait_custom_2{ border-right: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 41.7%; right: 0px; } .trait_custom_3{ border-right: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 50%; right: 0px; } button{ background: none; opacity: 50%; color: none; border: none; outline-style: none; width: 157px; height: 50px; cursor:pointer; } </style> <script> function changeColor(bgcolor,fontcolor) { document.body.style.background = bgcolor; document.body.style.color = fontcolor; localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé); localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé); } </script> </head> <body> <div class="font"> <div class="BandeMenuHaut"> <div class="text_custom"> <p>noir</p> <p>bleu</p> <p>rouge</p> <p>gris</p> </div> <div class="custom"> <div class="case_custom"> <div class="trait_custom_1"></div> <div class="trait_custom_2"></div> <div class="trait_custom_3"></div> </div> <div class="zone_custom"> <button onclick = "changeColor('black','gainsboro');"></button> <button onclick = "changeColor('MidnightBlue','gainsboro');"></button> <button onclick = "changeColor('black','firebrick')"></button> <button onclick = "changeColor('gainsboro','black')"></button> </div> </div> </div> </body> </html>
Et bien ... qu'est-ce qu'il a ce code ?
Il fonctionne très bien...
par contre, le Javascript .. on le place à la fin du code avant le </body>
Le mettre dans le head ... c'est à l'ancienne ... quand on codait il y a 15 ans...
Donc, si on remet le code dans le bon sens
Il fonctionne très bien...
par contre, le Javascript .. on le place à la fin du code avant le </body>
Le mettre dans le head ... c'est à l'ancienne ... quand on codait il y a 15 ans...
Donc, si on remet le code dans le bon sens
<!DOCTYPE html> <html> <head> <title>COULEUR</title> <meta charset="utf-8" /> <link rel="icon" href="ico.gif" type="image/gif"> <style> .font{ font-family:sans-serif; font-variant: small-caps; } .BandeMenuHaut { border-bottom: 1px solid ; display: block; height: 50px; width: 100%; position: fixed; margin-top: 0px; top: 0px; left: 0px; right: 0px; } .custom { border-right: 1px solid ; border-left: 1px solid ; display: block; height: 50px; width: 33.3333%; position: fixed; margin-top: 0px; top: 0px; left: 33.3%; right: 0px; } .text_custom{ display: flex; justify-content: space-around; font-size: 15px; z-index: 2; margin-left:33.3333%; margin-right:33.3333%; font-family: monospace; } .zone_custom{ display: flex; justify-content: space-around; z-index: 1; } .case_custom{ display: flex; justify-content: space-around; } .trait_custom_1{ border-right: 1px solid ; border-left: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 33.3%; right: 0px; z-index: 0; } .trait_custom_2{ border-right: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 41.7%; right: 0px; } .trait_custom_3{ border-right: 1px solid ; display: block; width: 8.3333%; height: 50px; position: fixed; margin-top: 0px; top: 0px; left: 50%; right: 0px; } button{ background: none; opacity: 50%; color: none; border: none; outline-style: none; width: 157px; height: 50px; cursor:pointer; } </style> </head> <body> <div class="font"> <div class="BandeMenuHaut"> <div class="text_custom"> <p>noir</p> <p>bleu</p> <p>rouge</p> <p>gris</p> </div> <div class="custom"> <div class="case_custom"> <div class="trait_custom_1"></div> <div class="trait_custom_2"></div> <div class="trait_custom_3"></div> </div> <div class="zone_custom"> <button onclick = "changeColor('black','gainsboro');"></button> <button onclick = "changeColor('MidnightBlue','gainsboro');"></button> <button onclick = "changeColor('black','firebrick')"></button> <button onclick = "changeColor('gainsboro','black')"></button> </div> </div> </div> <script> function changeColor(bgcolor,fontcolor) { document.body.style.background = bgcolor; document.body.style.color = fontcolor; localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé); localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé); } //code qui s'executera lorsque la page sera finie de charger (function(){ document.body.style.background = localStorage.getItem('bgcolor'); document.body.style.color = localStorage.getItem('fontcolor'); })(); </script> </body> </html>
Pourriez vous m'aider d'avantage?
Voila ce que j'ai essayé de faire, sans réel succès...