- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set the value in local storage and fetch – JavaScript?
Use localStorage.setItem(“anyKeyName”,yourValue) to set the value in local storage and if you want to fetch value then you can use localStorage.getItem(“yourKeyName”)
Example
Following is the code −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<input type="text" id="txtName" placeholder="Enter some value..." />
</body>
<script>
var textBoxNameHTML = document.getElementById('txtName');
textBoxNameHTML.addEventListener('change', (e) => {
localStorage.setItem("textBoxValue", e.target.value);
});
</script>
</html>To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VS Code editor.
Output
This will produce the following output on console −
Now, I am going to enter some value into the text box. This will produce the following output −
Now to get the value from localStorage, use the below concept and fetch the value on console −
Press the Enter key. This will produce the following output −
Updated on 09-Nov-2020 09:00:59
- Related Questions & Answers
- Difference between Session Storage and Local Storage in HTML5
- Retrieve element from local storage in JavaScript?
- Thread-local storage (TLS)
- Storing Credentials in Local Storage
- HTML DOM Local Storage clear() method
- Trick to store credentials in local storage
- Set multiple conditions in MongoDB and fetch value in a range
- What is the difference between local storage vs cookies?
- Android 4.0.1 breaks WebView HTML 5 local storage?
- Checking if a key exists in HTML5 Local Storage
- JavaScript fetch a specific value with eval()?
- HTML 5 local Storage size limit for sub domains
- How to save cache in local storage of android webview?
- How to save database in local storage of android webview?
- How to store a name permanently using HTML5 Local Storage?
Advertisements