Sauvegarde de données en Local

Sauvergde de varaible en javascript

7 avril 2014 à 13:23:04

Bonjour,

Je travail actuellement sur un jeu en local où, grâce à bouton, on peut incrémenter la variable pollution et décrémenter la variable vie. J'aimerais pouvoir sauvegarder et récupérer les valeurs de ces variables modifiées après fermeture ou rafraichissement de la page. J'ai donc codé ce petit programme. La sauvegarde et le chargement des variables fonctionnent. Lorsque je clique sur le bouton permettant d'incrémenter mes variables après la récupération de celles-ci (donc après la fermeture de ma page), le jeu m'affiche les variables que j'ai sauvegardé. Cependant lorsque je reclique sur le bouton, le jeu reprend les valeurs des variables que j'ai défini par défaut. J'ignore si ce dysfonctionnement provient de mon code ou tout simplement de la méthode que j'utilise pour sauvegarder les variables. Merci de votre aide !

<html>

    <head>
        <link rel="stylesheet"/>

        <meta charset="utf-8" />
        <title>test 5</title>


    </head>

    <body>

        <form>

        <script language="javascript">

            var vie=500;
            function changer(increment) {
            vie+=increment;
            document.getElementById('vie').value=vie;
            }
            var pollution=0;
            function modifier(increment) {
            pollution+=increment;
            document.getElementById('pollution').value=pollution;
            }

        </script>

        <input type="button" onClick="changer(-1); modifier(+2)">
        <input type="text" id="vie" value="500">
        <input type="text" id="pollution" value="0">
        <input id="stockage" type="button" value="Mémoriser">
        <input id="lecture" type="button" value="Récupérer">

        <script language="javascript">

            document.getElementById('vie').value=vie;
            document.getElementById('pollution').value=pollution;

       </script>

       </form>

        <script>

            // Méthode de stockage
            document.getElementById('stockage').onclick = function() {
            if(typeof localStorage!='undefined') {
            var sauvegarde = {
            vie:document.getElementById('vie').value,
            pollution:document.getElementById('pollution').value,
            };
            localStorage.setItem('coord',JSON.stringify(sauvegarde));
            alert("Mémorisation effectuée");
            } else alert("localStorage n'est pas supporté");
            } ;

            // Méthode de lecture
            document.getElementById('lecture').onclick = function() {
            if(typeof localStorage!='undefined') {
            var sauvegarde = JSON.parse(localStorage.getItem('coord'));
            document.getElementById('vie').value = sauvegarde.vie;
            document.getElementById('pollution').value = sauvegarde.pollution;
            alert("Lecture effectuée");
            } else alert("localStorage n'est pas supporté");
            } ;

        </script>

    </body>

</html>

astro53

7 avril 2014 à 15:34:45

Salut

Tu dois verifier si tu as une valeur enregistrer dans le storage avant de donner la valeur par default:

var defaultVie = localStorage.getItem('vie');

if(defaultVie!=undefined) vie = defaultVie;
else vie = 500;

Ce n'est qu un cours exemple pour guider tes pas...

A bientot

Astro

pierrefournierleray

7 avril 2014 à 19:40:59

Bonsoir !

Tout d'abord, merci de ta réponse ! Il me semble que j'ai compris d'où vient mon problème. Pour y remédier, j'ai donc créer une fonction "verification" qui se déclenche lors que je clic sur le bouton "récupérer". Cependant cela n'a aucun effet. Ma variable "vie" conserve sa valeur de 500, bien que ma page m'affiche la valeur que j'ai sauvegardé. Est ce parce que je n'ai pas rien compris à l'aide que tu m'as donnée ou bien parce que ma fonction n'est pas correcte ? Merci encore de toi aide !

<html>

    <head>
        <link rel="stylesheet"/>

        <meta charset="utf-8" />
        <title>test 5</title>


    </head>

    <body>

        <form>

        <script language="javascript">


            var vie=500 ;
            var pollution=0 ;
            var defaultVie = localStorage.getItem('vie') ;

            function verification () {
            if(defaultVie!=undefined) { vie = localStorage.getItem('vie') }
            else { vie = 500 }
            }

            function changer(increment) {
            vie+=increment;
            document.getElementById('vie').value=vie;
            }

            function modifier(increment) {
            pollution+=increment;
            document.getElementById('pollution').value=pollution;
            }

        </script>

        <input type="button" onClick="changer(-1); modifier(+2)" ; >
        <input type="text" id="vie" value="500">
        <input type="text" id="pollution" value="0">
        <input id="stockage" type="button" value="Mémoriser">
        <input id="lecture" type="button" value="Récupérer" onClick="verification" >

        <script language="javascript">

            document.getElementById('vie').value=vie;
            document.getElementById('pollution').value=pollution;

       </script>

       </form>

        <script>

            // Méthode de stockage
            document.getElementById('stockage').onclick = function() {
            if(typeof localStorage!='undefined') {
            var sauvegarde = {
            vie:document.getElementById('vie').value,
            pollution:document.getElementById('pollution').value,
            };
            localStorage.setItem('coord',JSON.stringify(sauvegarde));
            alert("Mémorisation effectuée");
            } else alert("localStorage n'est pas supporté");
            } ;

            // Méthode de lecture
            document.getElementById('lecture').onclick = function() {
            if(typeof localStorage!='undefined') {
            var sauvegarde = JSON.parse(localStorage.getItem('coord'));
            document.getElementById('vie').value = sauvegarde.vie;
            document.getElementById('pollution').value = sauvegarde.pollution;
            alert("Lecture effectuée");
            } else alert("localStorage n'est pas supporté");
            } ;



        </script>

    </body>

</html>

astro53

8 avril 2014 à 13:49:49

Salut

Lorsque tu affiche un script dans ton message utilise le button </> ce sera plus clair a lire.

 var vie=verification() ;

function verification () {
  return localStorage.getItem('vie') !=undefined ? localStorage.getItem('vie') : 500;
}

Tu n'utilise pas la verification comme il faut...Elle doit etre faite a l'ouverture pas au click

A bientot
Astro

pierrefournierleray

12 avril 2014 à 11:44:33

Bonjour !

D'accord, je n'y manquerai plus !

J'ai donc créer ce code, mais il ne fonctionne pas. Et je dois avouer que je ne comprends pas la fonction que vous me proposez.

Merci de votre aide !

<html>

	<head>
		<link rel="stylesheet"/>
		
		<meta charset="utf-8" />
		<title>test 5</title>
	
		
	</head>
	
	<body onLoad="verification()">
	
		<form>
		
		<script language="javascript">
			
			
			var vie=500 ;
			var pollution=0 ;
			var vie=verification() ;
 
			function verification () {
			return localStorage.getItem('vie') !=undefined ? localStorage.getItem('vie') : 500;
			}
		
			function changer(increment) { 
			vie+=increment; 
            document.getElementById('vie').value=vie;
            }
			
            function modifier(increment) {
            pollution+=increment;
            document.getElementById('pollution').value=pollution;
            }
       
		</script>
		
		<input type="button" onClick="changer(-1); modifier(+2)" ; >
        <input type="text" id="vie" value="500">
        <input type="text" id="pollution" value="0">
		<input id="stockage" type="button" value="Mémoriser">
		<input id="lecture" type="button" onClick="verification" value="Récupérer"  >
   
        <script language="javascript">
            
			document.getElementById('vie').value=vie;
            document.getElementById('pollution').value=pollution;
       
	   </script>
	   
	   </form>
	
		<script>
		
			// Méthode de stockage
			document.getElementById('stockage').onclick = function() {
			if(typeof localStorage!='undefined') {
			var sauvegarde = {
			vie:document.getElementById('vie').value,
			pollution:document.getElementById('pollution').value,
			};
			localStorage.setItem('coord',JSON.stringify(sauvegarde));
			alert("Mémorisation effectuée");
			} else alert("localStorage n'est pas supporté");
			} ;
			
			// Méthode de lecture
			document.getElementById('lecture').onclick = function() {
			if(typeof localStorage!='undefined') {
			var sauvegarde = JSON.parse(localStorage.getItem('coord'));
			document.getElementById('vie').value = sauvegarde.vie;
			document.getElementById('pollution').value = sauvegarde.pollution;
			alert("Lecture effectuée");
			} else alert("localStorage n'est pas supporté");
			} ;
		
		
		
		</script>
	
	</body>

</htm

pierrefournierleray

21 avril 2014 à 16:44:52

Une petite aide est elle possible s'il vous plait ? Merci !

Arnaud3033

15 septembre 2017 à 21:41:44

Bonjour, je sais que ce sujet est très ancien mais ton programme me serais très utile pour mon site, as tu finalement trouvé la solution ? Si oui serais tu m'envoyer ton script ou me dire ce qu'il faudrait modifier ?

Merci d'avance !

GabRay

16 septembre 2017 à 10:12:21

Le problème vient des variables utilisées pour l'incrémentation. La récupération des données enregistrées fonctionnent, mais ces données ne sont pas utilisées après. la variable vie/pollution est re-déclarée quoi qu'il arrive au début du script, et c'est cette variable qui s'incremente et s'ajoute dans l'input