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

**lcoulon** · 30/05/2017, 07h44

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ne restitue pas une variable après un page reload

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager