Persister une variable JS après actualisation

Fermé

Spovly Messages postés 3 Date d'inscription jeudi 18 avril 2019 Statut Membre Dernière intervention 19 avril 2019 - Modifié le 18 avril 2019 à 09:47
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 - 22 avril 2019 à 02:12

Bonjour,
J'aimerais créer un bouton où l'on indique le temps en seconde qui définie le temps entre chaque actualisation de la page.
Mon problème est que lorsque je rentre le temps, il est bien intégré à ma variable mais lorsque la page s'actualise donc la donnée se perd.
Comment je peux faire en sorte que cette donnée soit gardé dans le temps ?

Mon code :

        <form>
        <input type="number" id="time" size="20" name ="time">
        <button onclick="Refresh()">Valider</button>
 <script type="text/JavaScript">
 function Refresh(){
 var time = document.getElementById("time").value + "000";
 if (time >= 1000){
  var temps = time;
  }else{
   var temps = 10000;
   alert("Le temps doit etre superieur ou egale a 1 !");
   }
  } 
  javascript:(function() {
  function refresh() {
  window.location.reload(true);}
  setTimeout(refresh, tempsreel);
  })()
       </script>

PS : Je suis ARCHI débutant dans le domaine du dev, donc si vous pouviez m'aider ça serait super

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

A voir également:

Persister une variable JS après actualisation
Js/kryptik.ad ✓ - Forum Virus
Impossible de créer le fichier de travail. vérifiez la variable d'environnement temp ✓ - Forum Word
Variable objet ou variable de bloc with non définie - Forum VB / VBA
Bouton d'actualisation ✓ - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38303 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
18 avril 2019 à 09:52

Bonjour,
Tu peux tojours la stocker dans un cookie
ou les api Web Storage et IndexedDB

https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage

.

Spovly Messages postés 3 Date d'inscription jeudi 18 avril 2019 Statut Membre Dernière intervention 19 avril 2019
18 avril 2019 à 11:35

Merci pour ta réponse,
Sur ton lien, la catégorie "Les données persistent!" c'est ca que je veux faire.
Mais est-ce possible qu'a la place de :

localStorage.setItem('name','Chris');

Je mette ma variable :

localStorage.myVariable;

Ou un truc du style ?

magit
19 avril 2019 à 06:34

Salut, non plutôt:

localStorage.setItem('maVariable', 'valeurDeMaVariable');

localStorage.setItem permet de définir la variable à stocker et sa valeur. Cela l'ajoute si elle n'existe pas, change la valeur si elle existe.
explication détaillée même si tout est dit: https://www.w3schools.com/html/html5_webstorage.asp

sinon l'autre solution possible(outre les cookies) serais d'utiliser un formulaire et de transférer en GET (dans l'URL comme ceci www.monsite.fr?name=chris ) pour la récupérer si elle existe au chargement/rechargement de la page.
C'est plus limité en stockage et visible dans l'URL et un peu moins pratique pour la récupérer.

Par définition JavaScript est relié à la page donc pas de persistance de donnée dés que la page disparaît. C'est pour ça qu'il faut bricoler.

Spovly Messages postés 3 Date d'inscription jeudi 18 avril 2019 Statut Membre Dernière intervention 19 avril 2019
19 avril 2019 à 15:42

Salut, voici mon code :


<html>
<head> 

</head>
   
   <body>
	<form>
		Temps (en Second): <input type="number" id="time" size="20" name="time">
		<button onclick="Refresh()">Valider</button>
	</form>
   <div id="affichage"></div>
   </body>
	<script type="text/JavaScript">
	function Refresh(){
	var time = document.getElementById("time").value + "000";
	if (time >= 1000){
		var temps = time;
		localStorage.setItem('temps', 'temps');
		var tempsreel = localStorage.getItem(temps);
		}else{
			var temps = 10000;
			localStorage.setItem('temps', 'temps');
			alert("Le temps doit etre superieur ou egale a 1 !");
			}
		document.getElementById("affichage").innerHTML = temps;
		}	
		var tempsreel=localStorage.GetItem('temps');
			javascript:(function() {
		function refresh() {
		window.location.reload(true);}
		setTimeout(refresh, tempsreel);
		})()	

	
   </script>
</html>

Le div est simplement pour voir si la valeur se prend bien et c'est le cas. Dans l'url de ma page on a bien quelque chose qui s'ajoute du style "www.monsite.fr?time=2" lorsque je rentre la valeur 2.

As-tu quelque chose de plus pour m'aider à bricoler ? :'(

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
22 avril 2019 à 02:12

Petite remarque :
Tu as deux fois la fonction "Refresh" dans ton document.
De plus, ici :

localStorage.setItem('temps', 'temps');

tu n'as pas besoin de mettre de " ' " dans la deuxième "case" car c'est une variable et pour plus de clarté ton cookie ne l'enregistre pas avec le même nom que ta variable, on obtient donc :

localStorage.setItem('temps_cookie', temps);

Et aussi en HTML5 on ne met plus

<script type="text/javascript"> </script>

mais

<script> ...  </script>

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

VBA : Range avec références variables..

vérifiez la variable d'environnement TEMP

VBA Excel : sélection d'une plage variable