Web Storage: Saving Structured Data on the Client Side
This tutorial demonstrates how you can use the Web storage to create and save data locally or temporarily.
Warm-up
Become familiar with the Web Storage API basics by learning about:
-
Using a Local Storage
Create, import, and delete data in a local Web storage.
-
Saving Data in Local Storage and Session Storage
Save the same data in a local storage and session storage, and check whether the data exists after the browser is closed and reopened.
Using a Local Storage
Saving, reading, and deleting data in a local Web storage is a useful data management skill:
-
To save data in the storage, use the setItem() method that saves data in the key-value format:
<script> localStorage.setItem(key.value, data.value); </script>
Note If the size of the data exceeds 5 MB, an error occurs. -
To get the saved data, use the getItem() method with the data key:
<script> for (var i = 0; i < localStorage.length; i++) { localhtml += "<li>" + localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)) + "</li>"; } </script>
-
To delete the saved data:
- To delete a specific item, use the removeItem() method with the data key:
<script> localStorage.removeItem(key.value); </script>
-
To delete all the data stored in the local storage, use the clear() method:
<script> localStorage.clear(); </script>
Note The clear() method deletes all data within the same domain.
- To delete a specific item, use the removeItem() method with the data key:
Source Code
For the complete source code related to this use case, see the following file:
Saving Data in Local and Session Storage
Knowing how the same data is saved in local storage and session storage, and checking whether data exists when the browser is closed and reopened is a useful data management skill:
-
Create the storage key and define a button element for saving the data:
<body> Storage key: <input type="text" id="storageKey" style="width: 50px" /> value: <input type="text" id="storageData" style="width: 50px" /> <input type="button" id="save" value="SAVE" onclick="addStorage(); return false;" /> </body>
-
Get the key-value pair to be stored in the local storage and session storage using the getElementById() method. Store the input key-value pair received using the setItem() method:
<script> function addStorage() { var key = document.getElementById("storageKey"); var data = document.getElementById("storageData"); /* Set the local storage item */ if ("localStorage" in window) { localStorage.setItem(key.value, data.value); location.reload(); } else { alert("no localStorage in window"); } /* Set the session storage item */ if ("sessionStorage" in window) { sessionStorage.setItem(key.value, data.value); location.reload(); } else { alert("no sessionStorage in window"); } } </script>
-
Retrieve and display the stored data using the getItem() method:
<script> window.onload = function() { var localhtml = ""; var sessionhtml = ""; /* Get the local storage item */ for (var i = 0; i < localStorage.length; i++) { localhtml += "<li>" + localStorage.key(i) + " : " + localStorage.getItem(localStorage.key(i)) + "</li>"; } document.getElementById("localStorageData").innerHTML = localhtml; /* Get the session storage item */ for (var j = 0; j < sessionStorage.length; j++) { sessionhtml += "<li>" + sessionStorage.key(j) + " : " + sessionStorage.getItem(sessionStorage.key(j)) + "</li>"; } document.getElementById("sessionStorageData").innerHTML = sessionhtml; } </script>
Figure: Displaying local and session storage data (in mobile applications only)
If the browser is closed and reopened, only the local storage data can be displayed, as illustrated in the figure below.
Figure: Displaying data after reopening the browser (in mobile applications only)
Source Code
For the complete source code related to this use case, see the following file: