Académique Documents
Professionnel Documents
Culture Documents
1-Définition :
Le localStorage (La mémoire interne) est une méthode de stockage de données en local sur
le navigateur sous forme d’un objet(clé;valeur).
2- Fonctions Fondamentales de localStorage en JavaScript:
L'output
Html5 javascript
<input type="text" id="prenom"> //on récupére la déerniere valeure s'elle existe
<button var affiche=document.getElementById("affichage")
onclick="envoyer()">Envoyer</button> var répurération=localStorage.getItem("Prénom")
<p id="affichage"></p> if(répurération){
affiche.innerHTML="votre prénom : "+répurération }
//on récupère d' utilisateur La nouvelle valeur
function envoyer(){
var prenom=document.getElementById('prenom').value
localStorage.setItem("Prénom",prenom)
var affiche=document.getElementById("affichage")
affiche.innerHTML="votre prénom :
"+localStorage.getItem("Prénom") }
localstorage capture.
3- JSON.stringify:
JSON.stringify est une fonction JavaScript qui prend un objet JavaScript en tant qu'argument et renvoie une chaîne de
caractères JSON correspondante.
• HTML 5 • JAVASCRIPT
<h1>LocalStorage Data Table</h1> function addPerson() {
<label for="name">Name:</label> var nameInput = document.getElementById('name');
<input type="text" id="name" var ageInput = document.getElementById('age');
placeholder="Enter name"> var cityInput = document.getElementById('city');
<label for="age">Age:</label> var name = nameInput.value;
<input type="number" id="age" var age = ageInput.value;
placeholder="Enter age"> var city = cityInput.value;
<label for="city">City:</label> if (name.trim() === "" || age.trim() === "" ||
<input type="text" id="city" city.trim() === "") {
placeholder="Enter city"> alert("Please enter all fields!");
<button onclick="addPerson()">Add return;
Person</button> }
<table id="dataTable"> var existingPersons =
<tr> JSON.parse(localStorage.getItem('persons')) || [];
<th>Name</th> var newPerson = {name:name,age:age, city: city };
<th>Age</th> existingPersons.push(newPerson);
<th>City</th> localStorage.setItem('persons',
<th>Action</th> JSON.stringify(existingPersons));
</tr> nameInput.value = "";
</table> ageInput.value = "";
cityInput.value = "";
displayPersons(); }
function displayPersons() {
var dataTable =
document.getElementById('dataTable');
dataTable.innerHTML =
"<tr><th>Name</th><th>Age</th><th>City</th><th>Act
ion</th></tr>";
var existingPersons =
JSON.parse(localStorage.getItem('persons')) || [];
existingPersons.forEach(function(person, index) {
var row = dataTable.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.textContent = person.name;
cell2.textContent = person.age;
cell3.textContent = person.city;
var deleteButton =
document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function() {
deletePerson(index);}
cell4.appendChild(deleteButton);
}); }
function deletePerson(index) {
var existingPersons =
JSON.parse(localStorage.getItem('persons')) || [];
existingPersons.splice(index, 1);
localStorage.setItem('persons',
JSON.stringify(existingPersons));
displayPersons(); }
displayPersons();
**Objectif :** Concevoir une page web permettant aux utilisateurs de s'inscrire, de stocker leurs informations dans
le LocalStorage, et de se connecter avec vérification côté client.
- Créer un formulaire d'inscription avec des champs pour le nom, le mot de passe et l'e-mail.
- Inclure un bouton "S'inscrire" pour enregistrer les informations dans le LocalStorage.
- Valider les données côté client (par exemple, assurez-vous que le mot de passe est assez fort).
- Stocker les informations dans le LocalStorage sous une clé appropriée (par exemple, 'users').
- Créer une page de connexion avec des champs pour le nom et le mot de passe.
- Créer une page sécurisée accessible uniquement après une connexion réussie.
- Assurer la sécurité en validant côté client et en évitant de stocker les mots de passe en clair.