Local Storage Add and Retrieve using Javascript

Submitted by nurhodelta_17 on Monday, January 29, 2018 - 21:30.

Accessing Local Storage

Chrome: To access Local Storage in Chrome, do the ff steps: 1. Go to the page that you want to open local storage. 2. Press F12 console command and click Resources or Application. 3. Click local storage and click the name of the site. local storage chromeFirefox: To access Local Storage in Firefox, do the ff steps: 1. Go to the page that you want to open local storage. 2. Press F12 console command and click Storage. 3. 3. Click local storage and click the name of the site. local storage firefox As you can see, local storage consist of two columns. The first column is the key, then the second column is the value.

Creating our Example

This is the Full HTML of our example. 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Local Storage Add and Retrieve using Javascript</title>
  5. </head>
  6. <body>
  7. 	<input type="text" id="myInput"><button type="button" onClick="addStorage()">Add to Storage</button>
  8. 	<button type="button" onClick="retrieveStorage()">Alert Value</button>
  9. <script type="text/javascript">
  10. 	function addStorage(){
  11. 		var input = document.getElementById("myInput");
  12. 		var item = input.value;
  13. 		localStorage.setItem("myItem", item);
  14. 		input.value = '';
  15. 	}
  16. 	function retrieveStorage(){
  17. 		var item = localStorage.getItem("myItem");
  18. 		alert(item);
  19. 	}
  20. </script>
  21. </body>
  22. </html>
In here, we have set up that upon clicking Add to Storage button, addStorage function is called that adds data to our local storage with a set key of myItem and the value is the value the user type in our prepared textbox. Then, if the user click Alert Value button, retrieveStorage function is called that retrieves data from our local storage with our set key and alerts it. Note: Keys are unique in local storage, so if you add new item to local storage with existing key, the value of that key will be modified instead. That ends this tutorial. Happy Coding :)

Tags

Add new comment

About text formats
  • 135 views