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>

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.