Exemple 1 :
Enregistrer des variables dans le navigateur :
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>local1.html</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <h1>Local Storage</h1> | |
| <label>Nom</label><input type="text" id="nom" ><br/> | |
| <label>Prenom</label><input type="text" id="prenom"><br/> | |
| <input type="button" onclick="enregistrer()" value="Enregistrer"> | |
| <script> | |
| function enregistrer() { | |
| var nom = document.getElementById("nom").value; | |
| var prenom = document.getElementById("prenom").value; | |
| localStorage.setItem("nom",nom);//enregistre la valeur | |
| localStorage.setItem("prenom",prenom); | |
| document.location.href="local2.html";//lien vers la page 2 | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Récupérer les variables
| <html> | |
| <head> | |
| <title>local2.html</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body onload="init()"> | |
| <h1>Local Storage</h1> | |
| <label>Nom </label><div id="nom" ></div><br/> | |
| <label>Prenom </label><div id="prenom"></div><br/> | |
| <script> | |
| function init() { | |
| var nom = localStorage.getItem("nom"); | |
| var prenom = localStorage.getItem("prenom"); | |
| document.getElementById("nom").innerHTML = nom; | |
| document.getElementById("prenom").innerHTML = prenom; | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Exemple 2 :
Enregistrer des variables dans le navigateur
local1.html
<!DOCTYPE html>
<html>
<head>
<title>local1.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Local Storage</h1>
<label>a=</label><input type="number" id="a" value=5><br/>
<label>b=</label><input type="number" id="b" value=15><br/>
<label>c=</label><input type="number" id="c" value=3.14><br/>
<input type="button" onclick="enregistrer()" value="Enregistrer">
<script>
function enregistrer() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
localStorage.setItem("a",a);//enregistre la valeur
localStorage.setItem("b",b);
localStorage.setItem("c",c);
document.location.href="local2.html";//lien vers la page 2
}
</script>
</body>
</html>
Récupérer les variables :
local2.html
<html>
<head>
<title>local2.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="init()">
<h1>Local Storage</h1>
<div>a=<span id="a" ></span></div>
<div>b=<span id="b" ></span></div>
<div>c=<span id="c" ></span></div>
<div>x1=<span id="d" ></span></div>
<div>x2=<span id="e" ></span></div>
<input type="button" onclick="calculer2()" value="Calculer x2">
<script>
var a;
var b;
var c;
function init() {
a = localStorage.getItem("a");
b = localStorage.getItem("b");
c = localStorage.getItem("c");
var calcul = a*b+c;
document.getElementById("a").innerHTML = a;
document.getElementById("b").innerHTML = b;
document.getElementById("c").innerHTML = c;
calculer();
}//fin init
function calculer() {
var calcul = a*b+c;
document.getElementById("d").innerHTML = calcul;
}
function calculer2() {
var calcul = (a+b)/c;
document.getElementById("e").innerHTML = calcul;
}
</script>
</body>
</html>