Как изменить текст кнопки при нажатии с помощью localStorage в Javascript?
В этой статье мы узнаем, как изменить текст кнопки с помощью Javascript localStorage, когда мы нажимаем кнопку, полученную путем добавления прослушивателя событий HTML onclick.
Подход: окно HTML DOM localStorage позволяет нам хранить пары ключ-значение в нашем браузере, используя объект. Имя ключа должно быть уникальным, а пары ключ-значение всегда должны храниться в строковом формате. Основное различие между localStorage и sessionStorage заключается в том, что данные, хранящиеся в localStorage, не очищаются, если не задано значение localStorage.clear(). Данные, хранящиеся в sessionStorage, очищаются при выходе из сеанса страницы, если не задано значение sessionStorage.clear().
Используя объект localStorage, мы вызовем метод getItem('Key','Value') для установки данных с помощью localStorage.setItem('Key','Value') и изменим текст кнопки с помощью localStorage.getItem('Key').
Синтаксис:
Storageobj = window.localStorage;
Возвращаемое значение: возвращает объект хранения.
Пример: Ниже приведена реализация описанного выше подхода.
- HTML: ниже написан код HTML:
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: ниже написан код JavaScript:
Javascript
let btnDsn = document.querySelector( "#btn-design" ); localStorage.setItem( "Name" , "CLICKED" ); let name = localStorage.getItem( "Name" ); ( function (){ btnDsn.onclick = function () { btnDsn.textContent = name; }; })(); |
Выход:
Чтобы очистить все данные из localStorage, мы можем использовать localStorge.clear(), который помогает очистить все данные, которые мы вставили с помощью метода setItem(). В результате при наведении на кнопку текст не изменится, так как localStorage уже очищен.
Код JavaScript: Ниже приведена реализация описанного выше подхода. Вы можете изменить приведенный выше код сценария с помощью следующего фрагмента.
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(); |
Выход: