How to change a button text on click using localStorage in Javascript ?
Last Updated :
04 Apr, 2022
In this article, we will learn how to change a button text using Javascript localStorage when we click on the button achieved by adding HTML onclick event listener.
Approach: HTML DOM Window localStorage allows us to store key-value pairs in our browser using an object. The name of the key should be unique and key-value pairs always be stored in string format. The main difference between localStorage and sessionStorage is that the data stored in localStorage does not clear unless localStorage.clear() is given. The data stored in sessionStorage gets cleared when the page session is exited unless sessionStorage.clear() is given.
Using localStorage object, we will invoke getItem('Key','Value') method to set data using localStorage.setItem('Key','Value') and change the button text using localStorage.getItem('Key').
Syntax:
Storageobj = window.localStorage;
Return Value: It returns a storage object.
Example: Below is the implementation of the above approach.
- HTML: Below is the HTML code written:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing Button text on hovering using localStorage</title>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500&display=swap');
* {
margin: 0px;
padding: 0px;
font-family: 'Zilla Slab', serif;
}
section {
position: absolute;
width: 100%;
height: 100%;
right: 0px;
bottom: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#containers {
text-align: center;
border: 2px solid green;
height: 52vh;
width: 29vw;
display: flex;
justify-content: center;
flex-direction: column;
background-color: cornsilk;
}
section p {
font-weight: 400;
}
/* Designing Button */
#btn {
margin-top: 12px;
}
button {
padding: 7px;
border: 1px solid black;
border-radius: 3px;
cursor: pointer;
font-weight: 500;
}
button:hover {
transition: 1s;
background-color: rgb(226, 226, 228);
}
</style>
</head>
<body>
<section id="btn-container">
<div id="containers">
<p id="para-id">
Click the Button to change the Button text
</p>
<div id="btn">
<button id="btn-design">CLICK NOW</button>
</div>
</div>
</section>
</body>
<script src="script.js"></script>
</html>
- JavaScript: Below is the JavaScript code written:
JavaScript
let btnDsn = document.querySelector("#btn-design");
localStorage.setItem('Name','CLICKED');
let name = localStorage.getItem('Name');
(function (){
btnDsn.onclick = function() {
btnDsn.textContent = name;
};
})();
Output:
To clear all the data from localStorage, we can use localStorge.clear() which helps to clear all the data which we have inserted using the setItem() method. As a result, on hovering over the button, the text will remain unchanged as the localStorage is already cleared.
JavaScript code: Below is the implementation of the above approach. You can change the above script code with the following snippet.
JavaScript
let btnDsn = document.querySelector("#btn-design");
localStorage.setItem('Name','CLICKED');
let name = localStorage.getItem('Name');
(function (){
btnDsn.onclick = function() {
btnDsn.textContent = name;
};
})();
localStorage.clear();
Output:
Similar Reads
How to Change the Button Label when Clicked using JavaScript ? Changing the Label of the Button element when clicked in JavaScript can be used to provide more information to the user such as the text of the Submit button will change to the Submitted as soon as the form submission is completed. The below approaches can be used to accomplish this task: Table of C
2 min read
How to Change Button Label in Alert Box using JavaScript ? In JavaScript, the alert method is used to display an alert box with a message. By default, the alert box contains an "OK" button. We cannot directly update the default alert box, However, we can customize the button label by creating a custom alert box using HTML, CSS, and JavaScript. ApproachCreat
2 min read
How to change the href value of a tag after click on button using JavaScript ? JavaScript is a high-level, interpreted, dynamically typed, and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML document
4 min read
How to change the text of a label using JavaScript ? Changing the text of a label using JavaScript involves selecting the label element and updating its textContent or innerHTML property. This allows you to modify the displayed text dynamically, often in response to user interactions or changes in data, enhancing interactivity and responsiveness.Below
2 min read
How to change the text and image by just clicking a button in JavaScript ? The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button. We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using si
2 min read
How to Change Text Inside all HTML Tags using JavaScript ? In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic
3 min read