数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在点击时使用 LocalStorage 更改按钮文本（JavaScript）？
JavaScript 是一种著名的编程语言，是万维网 (WWW) 的核心语言之一，与 HTML 和 CSS 并列。它允许程序员捕获事件并修改文档对象模型 (DOM)。在本文中，我们将了解如何利用 JavaScript 在点击按钮时更改按钮文本，并借助 localStorage 实现。
localStorage
localStorage 是 window 接口的一个只读属性，允许用户存储数据。保存的信息在浏览器会话之间保留。
localStorage 属性类似于 sessionStorage，但区别在于，即使页面会话结束，数据仍然保留。
我们可以使用 getItem() 方法获取 localStorage 项目。其语法如下：
localStorage.getItem(‘key’);
我们还可以设置 localStorage 项目。这可以使用 setItem() 方法完成。其语法如下：
localStorage.setItem(‘key’,’value’);
示例
步骤 1：首先，我们将定义 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<title>How to change a button text on click using localStorage in Javascript?</title>
</head>
<body>
<h4>How to change a button text on click using localStorage in Javascript?</h4>
<div>
<button id="main">CLICK ME!</button>
</div>
</body>
</html>
步骤 2：现在，我们将使用 CSS 为元素提供一些样式。
<style>
#main {
width: 20%;
height: 50px;
border-radius: 10px;
}
</style>
步骤 3：现在，我们将编写在点击按钮时更改文本的逻辑。
<script>
let button=document.getElementById('main');
localStorage.setItem('buttonText','CLICKED!');
button.onclick=function(){
button.textContent=localStorage.getItem('buttonText');
}
</script>
以下是完整代码：
<!DOCTYPE html>
<html>
<head>
<title>How to change a button text on click using localStorage in Javascript?</title>
<style>
#main {
width: 20%;
height: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<h4>How to change a button text on click using localStorage in Javascript?</h4>
<div>
<button id="main">CLICK ME!</button>
</div>
<script>
let button=document.getElementById('main');
localStorage.setItem('buttonText','CLICKED!');
button.onclick=function(){
button.textContent=localStorage.getItem('buttonText');
}
</script>
</body>
</html>
结论
在本文中，我们了解了如何使用 localStorage 的 getItem() 和 setItem() 方法访问存储项目。结合 onClick 事件的知识，我们能够在每次点击按钮时更改按钮元素的文本。
更新于： 2023年9月12日
365 次浏览
广告