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>
Affichages : 4687