[Jquery (Mobile)] Stocker un champ dans une variable en local

Bonjour à tous,
Je suis actuellement en train de réaliser une petite application mobile grâce à Jquery Mobile. Je fais beaucoup d'intégration web donc pas de problème de ce côté, en revanche je débute en Jquery mais je ne demande qu'à apprendre (mes nuits sont longues et pleines de recherches...)

Je suis actuellement en train de bosser sur une petite application de recettes, et je bloque sur un point.

Avant de commencer une recette, sur la première page, il sera demandé à l'utilisateur pour combien de personnes il souhaite cuisiner grâce à un input de type range :

<label for="slider">Nombre de personnes :</label>	
<form>
	<input type="range" name="slider" id="slider" value="1" min="1" max="10" />
	<input id="slidersubmit" type="submit" value="C'est parti" />
</form>

Du côté de Jquery, je récupère la valeur du champ "slider" et l'affiche dans la div selection 1 grâce à ce code :

$(document).ready(function(){
    $('form').submit(function(){
        var input = $('#slider').val();
        $('#selection1').text(input);
        return false;
    });
});

Ce que je souhaite faire désormais, c'est récupérer cette valeur et la stocker dans une variable, à laquelle je ferai appel sur les pages suivantes. (Attention, cela sera utilisé sur des tablettes, en local, et donc sur le navigateur de ces tablettes.)

Grâce à cette variable / valeur récupérée, je pourrais ensuite calculer les portions sur la page suivante. Exemple si il faut 2 tomates par personne et qu'on choisit de cuisiner pour 2 personnes, ça donnerait quelque chose du genre :

var nbrtomates = nbrpersonnes * 2 ;

Je n'aurai ensuite plus qu'à afficher la valeur de nbrtomates.

J'ai tenté plusieurs méthodes pour stocker la valeur de mon champ dans une variable, notamment avec getElementById et un innerHTML, sans succès...

Pour information, je passe d'une page à une autre grâce à Jquery Mobile, j'ai donc l'ensemble des étapes d'une recette sur une seule page avec un head commun. (ce qui est censé faciliter le truc)

Quelqu'un pourrait-il m'aider à y voir plus clair ?

En vous remerciant, bien cordialement.

Bonjour,
regarde en détail localStorage,
par exemple :
https://www.w3schools.com/jsref/prop_win_localstorage.asp
on stocke en local des paires nom/données qu'on peut récupérer ensuite
ces paires sont stockées dans le navigateur et sont disponibles après fermeture et réouverture du navigateur

Bonjour Fareng, un grand merci pour ta réponse ! En effet je ne connaissais pas localStorage, cela va pas mal m’aider.

Est-il possible d’ajouter en plus dans ma fonction une ligne pour stocker ma valeur dans une variable, de sorte a pouvoir l’afficher ensuite ou je le souhaite grâce à document.write ? Car actuellement j’ai l’impression que ma valeur ne se stocke pas sur la var input, car hormis sur ma div je n’arrive pas à l’afficher ailleurs... Étrange.

Un grand merci !
Modifié par TIT4N (07 Aug 2019 - 22:03)

Un grand merci d'avoir pris le temps de m'expliquer les choses, cela va beaucoup m'aider à assimiler !
Je teste ça au plus vite, mais ça va le faire.
Excellente journée à toi !

Hello,
Je me permet de revenir vers toi / vous ayant toujours des difficultés avec ce bout de code... Pas moyen de résoudre ce problème, les boites de Doliprane s'enchainent !

Voici mon code actuel :

<script type="text/javascript">
   $(document).ready(function(){
      $('#my-form').submit(function(){
        var valeur = $('#slider').val(); /* Je stock dans la variable "valeur" la valeur choisie sur mon slider */
        $('#valeurdiv').text(valeur); /* J'affiche dans la div "valeurdiv" ma valeur */
        return false;
    });
});
		 
		 function saveData(){
		 var savevaleur = localStorage.setItem("valeurdiv", 'valeur'); /* Je stocke ma valeur dans la variable "savevaleur" pour la retrouver même après fermeture du navigateur */
		 }  

</script>

Pour mon HTML, je souhaite récupérer ma valeur lorsque mon champ est envoyé, et la multiplier par deux via la variable "tomates" :

<label for="slider">Nombre de personnes :</label>
		<form id="my-form">
			<input type="range" name="slider" id="slider" value="1" min="1" max="10" />
			<input id="slidersubmit" onClick="valenter();" type="submit" value="Submit" />
		</form>
		
<p>
   Valeur choisie : <div id="valeurdiv"></div>
</p>
		
<p>
   Nombre de tomates : <div id="personnes"></div>
   <script>
        var data = localStorage.getItem('savevaleur');
        var tomates = data*2;
       document.getElementById('personnes').innerHTML = tomates;
   </script>
</p>

J'ai tenté 100 choses différentes, pas moyen que ça fonctionne... Ma valeur n'est jamais stockée.

Ce que je cherche à faire je le rappelle :

-Récupérer la valeur indiquée sur l'input slider ;
-La stocker dans une variable et l'enregistrer indéfiniement avec localStorage ;
-Récupérer cette variable sur une autre page, et la multiplier par deux avant de l'afficher ;

Je débute, mais j'essaye de m'accrocher. N'hésitez pas à me corriger et à m'expliquer où je me suis trompé.

Merci beaucoup !