Here, we try to discuss How to Store Data in LocalStorage in JavaScript. We can be used to store data on the user’s computer by the LocalStorage API gives front-end web developers access to a common key-value datastore.
Storing data on the client side can help reach the performance of your web applications because it can reduce the number of database queries necessary on the server.
Here, these frees up valued server resources and can potentially minimize infrastructure costs.
In this article, you will learn how to save data to localStorage in JavaScript.
If you want then buy a good, reliable, secure web hosting service from here: click here
What is localStorage in JavaScript?
The LocalStorage is a property that allows JavaScript sites and apps to store key-value pairs in a web browser without an expiration date.
This means the saved data persists even after the user closes the browser or restarts the computer.
The LlocalStorage is a Window object property, making it a global object that can interact with and manipulate browser windows.
It can be used in combination with other window features and methods.
How to Store Data in LocalStorage in JavaScript
You can use the setItem() function to store data in LocalStorage. The item key and a value are two parameters that take this function.
// Functions
localStorage.setItem('name', 'Cloudsurph LLC');
// Object
localStorage.name = 'Cloudsurph LLC';
// Array
localStorage['name'] = 'Cloudsurph LLC';
We’re going to save their name so we can use it later to show them a personal message when the user submits the form.
If you want then buy a good, reliable, secure web hosting service from here: click here
Now, The JavaScript code below shows how you can interrupt form submission and save the username
<form id="contactForm" action="contact.php" method="POST"> <div class="field"> <label for="name">Name</label> <input type="text" name="name" id="name"> </div> <div class="field"> <label for="email">Email</label> <input type="email" name="email" id="email"> </div> <div class="field"> <label for="message">Message</label> <textarea name="message" id="message"></textarea> </div> <div class="field"> <input type="submit" value="send"> </div> </form>
Now let’s take a look at how to get it back out again so that you know how to save data to the datastore.
window.onload = function() {
// Check for LocalStorage support.
if (localStorage) {
// Add an event listener for form submissions
document.getElementById('contactForm').addEventListener('submit', function() {
// Get the value of the name field.
var name = document.getElementById('name').value;
// Save the name in localStorage.
localStorage.setItem('name', name);
});
}
}
Previous JavaScript Articles
- Create a Heap in JavaScript
- Inserting Elements into a Heap in JavaScript
- Removing Elements from the Heap in JavaScript
- JavaScript How to Calculate Age from Birthdate
- How to interact JavaScript with REST API
- How to break ForEach in JavaScript
How to Retrieve Data from LocalStorage
You use the getItem() function to retrieve data. The key that you used when storing data takes a single parameter.
window.onload = function() {
...
// Retrieve the users name.
var name = localStorage.getItem('name');
if (name != "undefined" || name != "null") {
document.getElementById('welcomeMessage').innerHTML = "Hello " + name + "!";
} else
document.getElementById('welcomeMessage').innerHTML = "Hello!";
}
}
How to Remove Data from LocalStorage
So, if you need to remove an item from the datastore you use the removeItem() function. This function takes the key of the item you want to delete.
localStorage.removeItem('name');
If you want then buy a good, reliable, secure web hosting service from here: click here
That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.