資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
廣告