HTML LocalStorage
Learn to persistently store data in the browser with the localStorage
API.
LocalStorage in HTML
LocalStorage lets you save information in the user's browser, which persists even after closing the window. Let's see how it works.
What is LocalStorage?
The localStorage
API allows data to be persistently stored in the user's browser. This data has no expiration date and remains available until it is manually deleted by the web application or the user.
Saving Data with setItem()
To save data, use the setItem()
method. It takes two arguments: a key (as a string) and a value (also as a string). For example: localStorage.setItem('username', 'guest');
Retrieving Data with getItem()
To retrieve data, use the getItem()
method with the corresponding key. If the key doesn't exist, it returns null
. For example: let user = localStorage.getItem('username');
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
localStorage.('user', 'John'); let user = localStorage.('user');
Practice Example: Code Editor
Create a simple form with an input field and a button. When the button is clicked, save the input's value to localStorage and display a confirmation message.