localstorage ne restitue pas une variable après un page reload

1 pièce(s) jointe(s)

Bonjour,

Je suis débutant en Javascript et je cherche à sauvegarder et restituer une variable ( value d'une textbox ) par le biais de localstorage.

Lorsque l'utilisateur choisi un ID dans la selectbox, le champ value de la textbox est automatiquement mis à jour.
J'ai besoin de capturer la value de celle ci afin de la sauvegarder, car lorsque l'utilisateur choisi un ID un page refresh / reload doit etre executé pour que coté serveur l'opération soit prise en compte.

Après le page reload / refresh, j'aurai besoin que le dernier ID soit selectionné dans la selectbox et que la derniere value correspondante soit affichée dans la textboix.

Pour le moment, mon code essai de sauvegarder que la value de la textbox, mais il semble que la donnée sauvegardée précédemment ne soit pas restituée car elle ne s'affiche pas dans la textebox, pouvez vous me dire que qu'il ne va pas ?
Pouvez vous me montrer comment faire pour faire afficher dans la selectbox, le dernier choix cliqué par l'utilisateur après le page refresh ?

Merci beaucoup pour votre aide,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Form Test</title>
  	<!-- Make textbox with id="linked_type" with no border -->
 
  	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
 
  	<script>
    // Retrieve stored variables before page reload / refresh   
                var gpio_name = sessionStorage.getItem('local_storage_gpio_name');
                console.log(gpio_name);
    </script>
 
 
 
	<style>
        #linked_type {
    background-color:transparent;
    border:0px;
    padding:0px;
        }
        </style>	
 
</head>
 
	<!-- https://www.w3schools.com/jsref/prop_text_value.asp -->
 
 
 
 
  <body>											
  									<form method="GET" action="gpio.htm" id="gpio_2">	
 
										<select name="ID" id="ID_list" onchange="update_linked_selection(); refresh_page();">
										<option value="x">Select ID below</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
										<option value="8">8</option>
										<option value="9">9</option>
										<option value="10">10</option>																																								
										</select>
 
										<input type="text" maxlength="15" name="name" id="linked_name" size="15" maxlengtd="10">	
										</form>	
 
 
<script>
        // Set linked fields according to dropdown selection box
        function update_linked_selection() {
  var ID_selection = document.getElementById("ID_list");
  document.getElementById("linked_name").value = "~gpio_name(" + ID_selection.options[ID_list.selectedIndex].text + ")~";    
 
                
        // Store new fieds into localStorage for next page reload
        var selected_gpio_name = document.getElementById("linked_name");
        
        localStorage.setItem("local_storage_gpio_name", selected_gpio_name);
 
  // relecture intermédiaire afin de s'assurer que la donnée à bien été stockée dans localstorage (facultatif)
        var storage_reload = sessionStorage.getItem("local_storage_gpio_name");
        console.log(storage_reload);
}
</script>
 
 
 
<script>
        function refresh_page() {
 
        
        // Do the page reload   
    setTimeout(function () {
        location.reload(true)
    }, 100);
}
</script>

localStorage != sessionStorage

Merci pour cette précision, mais j'avais bien noté que localstorage était persistant et que sessionstorage s'efface si l'onglet ou le navigateur est fermé.

Pour revenir à ma question initiale, pouvez vous m'apporter de l'aide svp ?

jour

quand tu fait ceci
Code:

1 2 3 var selected_gpio_name = document.getElementById("linked_name"); localStorage.setItem("local_storage_gpio_name", selected_gpio_name);
la variable contient une reference a l'element et tu peut pas sauvegarder une reference sauvegarde plutot la valeur

Code:

var selected_gpio_name = document.getElementById("linked_name").value;

Merci, cela explique pourquoi je ne voyais pas le contenu de la variable dans la console.

Comment dois je faire pour repositionner la selectbox sur le dernier ID sélectionné par l'utilisateur avant le page refresh ?

Je vais sauvegarder l'ID dans localstorage également, mais ensuite ?

Comment faire en sorte que le "select" de la selectbox soit positionné correctement pour que lorsque la page sera chargée le bon ID soit affiché automatiquement avec la value correspondante dans la textbox ?

EDIT : correction d'une faute d'orthographe.

avec selectedIndex on peut recuperer la position du select et on peut assigné la position dans le select