data-*屬性是HTML5中用於存儲(chǔ)自定義數(shù)據(jù)的特性，允許在元素上保存不影響頁(yè)面結(jié)構(gòu)和樣式的信息。 1. 它通過(guò)data-後接自定義名稱的形式定義，如

；2. 優(yōu)勢(shì)包括可讀性強(qiáng)、避免命名衝突、兼容性好；3. 可通過(guò)JavaScript的dataset對(duì)象獲取或設(shè)置數(shù)據(jù)，如element.dataset.userId；4. 常用於存儲(chǔ)AJAX參數(shù)、控制組件狀態(tài)、傳遞插件配置等場(chǎng)景；5. 使用時(shí)需注意不存敏感信息、避免大量數(shù)據(jù)、合理命名並保持更新同步。

有時(shí)候我們需要在HTML 元素上存儲(chǔ)一些額外信息，但又不想影響頁(yè)面的結(jié)構(gòu)或樣式。這時(shí)候，HTML5 提供的自定義數(shù)據(jù)屬性（data-*）就派上了用場(chǎng)。

什麼是data-* 屬性？

data-* 是HTML5 引入的一種標(biāo)準(zhǔn)方式，允許我們?cè)谠厣洗鎯?chǔ)任意的自定義數(shù)據(jù)。它的命名格式是data-後面接一個(gè)你自己定義的名字，比如：

 <div data-user-id="123" data-role="admin"></div>

這些屬性不會(huì)被瀏覽器渲染成視覺(jué)內(nèi)容，也不會(huì)影響頁(yè)面佈局，但可以通過(guò)JavaScript 輕鬆訪問(wèn)和操作。非常適合用來(lái)保存與DOM 元素相關(guān)的一些元信息。

為什麼使用data-* 屬性？

相比起過(guò)去常見的做法，比如把信息寫在class 或id 裡，或者通過(guò)hidden input 存儲(chǔ)，data-* 更加語(yǔ)義化、規(guī)範(fàn)，也更容易維護(hù)。

它有幾個(gè)明顯優(yōu)勢(shì)：

• 可讀性強(qiáng)：別人看你的HTML，能一眼看出哪些是自定義的數(shù)據(jù)。
• 避免命名衝突：data-* 名字是你自己控制的，不會(huì)跟別的屬性撞車。
• 兼容性好：現(xiàn)代瀏覽器都支持，而且jQuery 等庫(kù)也內(nèi)置了便捷的API 來(lái)讀寫它們。

怎麼在實(shí)際中使用？

在項(xiàng)目中使用data-*，一般會(huì)結(jié)合JavaScript 來(lái)操作。例如：

獲取數(shù)據(jù)

const element = document.querySelector('#myElement');
const userId = element.dataset.userId; // 注意駝峰命名

HTML 中如果寫的是data-user-id ，JavaScript 中對(duì)應(yīng)的就是dataset.userId 。

設(shè)置數(shù)據(jù)

element.dataset.prefetchUrl = '/api/user/123';

這會(huì)在元素上自動(dòng)創(chuàng)建data-prefetch-url屬性。

常見應(yīng)用場(chǎng)景包括：

• 存儲(chǔ)AJAX 請(qǐng)求需要的參數(shù)
• 控制組件狀態(tài)（比如菜單是否展開）
• 傳遞配置項(xiàng)給前端插件

舉個(gè)例子，你有一個(gè)按鈕，點(diǎn)擊後要加載用戶數(shù)據(jù)，可以這樣寫：

 <button data-user-id="456" class="load-user">加載用戶</button>

然後JS 裡監(jiān)聽點(diǎn)擊事件，直接從dataset.userId取值去請(qǐng)求接口。

使用時(shí)需要注意什麼？

雖然data-* 很方便，但也不是隨便亂用的。有幾個(gè)細(xì)節(jié)要注意：

• 不要存敏感信息：因?yàn)檫@些數(shù)據(jù)是暴露在HTML 中的，誰(shuí)都能看到。
• 避免大量數(shù)據(jù)：雖然你可以存JSON 字符串進(jìn)去，但別當(dāng)成客戶端數(shù)據(jù)庫(kù)來(lái)用。
• 合理命名：名字要有意義，盡量統(tǒng)一風(fēng)格，方便團(tuán)隊(duì)協(xié)作。
• 注意更新同步：如果數(shù)據(jù)變化頻繁，記得更新對(duì)應(yīng)的data-* 值，否則可能拿到舊數(shù)據(jù)。

如果你需要用多個(gè)單詞，推薦用連字符分隔，JS 中就會(huì)變成駝峰形式訪問(wèn)。比如data-item-index → dataset.itemIndex 。

---

基本上就這些。 data-* 屬性是個(gè)小而實(shí)用的功能，合理使用能讓前端代碼更清晰、更有條理。

以上是利用HTML5中的自定義數(shù)據(jù)屬性存儲(chǔ)信息的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！