LocalStorage
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:
3-Exemple INSERER UNE SEULE VALEURE
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.
let a={hello:"yassine",language:"javascript"} {"hello":"yassine","language":"javascript"}
let b=JSON.stringify(a)
console.log(b)
• Pour tester si un clé existe bien : localstorage.getitem(“nom”)!=nul{}
4- INSERER PLUSIEURS VALEUR
• 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();
**TP : Gestion d'Authentification avec LocalStorage**
**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.
### Partie 1 : Mise en place de l'interface utilisateur
1. **Page HTML (index.html) :**
- 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.
### Partie 2 : Gestion de l'inscription et du LocalStorage
2. **JavaScript (script.js) - Partie Inscription :**
- Écrire une fonction qui récupère les valeurs du formulaire d'inscription.
- 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').
3. **Page HTML (login.html) :**
- Créer une page de connexion avec des champs pour le nom et le mot de passe.
- Ajouter un bouton "Se connecter" pour vérifier les informations d'authentification.
4. **JavaScript (script.js) - Partie Connexion :**
- Écrire une fonction qui récupère les valeurs du formulaire de connexion.
- Vérifier si les informations correspondent à celles stockées dans le LocalStorage ('users').
- Rediriger l'utilisateur vers une page sécurisée si l'authentification réussit.
### Partie 3 : Page sécurisée et gestion des erreurs
5. **Page HTML (secure.html) :**
- Créer une page sécurisée accessible uniquement après une connexion réussie.
- Afficher un message de bienvenue avec le nom de l'utilisateur.
6. **JavaScript (script.js) - Gestion des erreurs :**
- Si l'authentification échoue, afficher un message d'erreur approprié sur la page de connexion.
- Gérer les cas où l'utilisateur n'est pas inscrit.
### Consignes supplémentaires :
- Utiliser HTML, CSS et JavaScript.
- Utiliser le LocalStorage pour stocker les informations d'inscription.
- Assurer la sécurité en validant côté client et en évitant de stocker les mots de passe en clair.
- Tester l'application avec différents scénarios d'inscription et de connexion.
- Commenter le code pour expliquer la logique derrière chaque fonction.
- Soumettre le TP avec les fichiers HTML, CSS et JavaScript.
