如何使用 Javascript 中的 localStorage 在单击时更改按钮文本？

在本文中，我们将学习如何在单击按钮时使用Javascript localStorage更改按钮文本，通过添加 HTML onclick 事件监听器实现。

方法： HTML DOM 窗口 localStorage 允许我们使用对象在浏览器中存储键值对。键的名称应该是唯一的，并且键值对始终以字符串格式存储。 localStorage 和 sessionStorage 的主要区别在于，除非给出 localStorage.clear()，否则存储在 localStorage 中的数据不会被清除。当页面会话退出时，存储在 sessionStorage 中的数据会被清除，除非给出 sessionStorage.clear()。

使用 localStorage 对象，我们将调用 getItem('Key','Value') 方法来使用 localStorage.setItem('Key','Value') 设置数据，并使用 localStorage.getItem('Key') 更改按钮文本。

句法：

Storageobj = window.localStorage;

返回值：返回一个存储对象。

示例：下面是上述方法的实现。

HTML：下面是编写的 HTML 代码：

HTML




    Changing Button text on hovering using localStorage
    
    
    

  

    
        
            
               Click the Button to change the Button text

Javascript

let btnDsn = document.querySelector("#btn-design");
localStorage.setItem('Name','CLICKED');
let name = localStorage.getItem('Name');
  
(function (){
    btnDsn.onclick = function() {
        btnDsn.textContent = name;
    };
})();

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();

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();

输出：