The Web Storage is used for storing and retrieving data in the browser. There are two type of storage:
- localStorage: It is a type of web storage that allows you to store data on the client-side, even after the browser is closed. The data is stored and available even after a page refresh or a browser restart.
- sessionStorage: It is stored for a single session and is deleted when the browser is closed. The data is not stored and is not available after a page refresh or a browser restart.
Both localStorage and sessionStorage can be accessed using the localStorage and sessionStorage properties of the window object in JavaScript. The data is stored in key-value pairs and has a limit of approx 5-10 MB, based on the browser type.
code example;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="div1"></p> <br /> <p id="div2"></p> <script type="text/javascript"> // Store data in localStorage localStorage.setItem("key1", "value1"); // Retrieve data from localStorage var localData = localStorage.getItem("key1"); // Store data in sessionStorage sessionStorage.setItem("key2", "value2"); // Retrieve data from sessionStorage var sessionData = sessionStorage.getItem("key2"); document.getElementById("div1").innerHTML=localData; document.getElementById("div2").innerHTML=sessionData; </script> </body> </html> |
Output:
value1
value2