JavaScript 如何使用localStorage在点击时更改按钮文本

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

方法： HTML DOM Window 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; 
    }; 
})();

输出:

JavaScript 如何使用localStorage在点击时更改按钮文本

清除所有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();

输出:

JavaScript 如何使用localStorage在点击时更改按钮文本