data-屬性是html5引入的自定義屬性，用于在html元素上存儲額外數據以輔助JavaScript操作。它通過以data-開頭的屬性名（如data-id、data-username）實現，不影響頁面渲染且用戶不可見，但可通過javascript的dataset對象訪問和操作。使用時只需在html標簽中添加相應屬性并賦值，例如
，并通過dataset.userid讀取值。其優勢在于語義明確、不干擾瀏覽器行為、兼容性好且便于維護。常見應用場景包括綁定列表項id、控制組件狀態以及作為前后端交互中介。需要注意的是，data-適合存儲少量非持久化數據，大量或跨頁面數據應使用localstorage等方案。
網頁開發中，我們常常需要在html元素上存儲一些額外的數據，用來輔助JavaScript操作或傳遞信息。這時候，data-*屬性就派上用場了。
什么是data-*屬性？
data-*是html5引入的一種自定義屬性，允許我們在標準的HTML標簽里存儲任意數據。這里的*可以替換成你想要的名字，比如data-id、data-username、data-role等等。這些屬性不會影響頁面的渲染，也不會被用戶直接看到，但可以通過JavaScript方便地訪問和操作。
它本質上就是一種“附加信息”的方式，讓前端開發者可以在dom節點上掛載一些狀態或參數。
立即學習“前端免費學習筆記（深入）”；
data-*屬性怎么用？
使用起來非常簡單。你只需要在HTML標簽中添加一個以data-開頭的屬性，然后給它賦值就行。例如：
<div data-userid="12345" data-username="john_doe">用戶信息</div>
上面這段代碼里，我們為這個div添加了兩個自定義數據屬性：data-userid和data-username。它們的值分別是字符串”12345″和”john_doe”。
在JavaScript中，你可以通過dataset對象來訪問這些數據：
const div = document.querySelector('div'); console.log(div.dataset.userid); // 輸出: "12345" console.log(div.dataset.username); // 輸出: "john_doe"
注意，屬性名中的連字符（-）會被轉換成駝峰命名。比如data-first-name會變成dataset.firstName。
為什么推薦使用data-*而不是其他自定義屬性？
以前沒有data-*的時候，有些人會直接用普通的屬性來存數據，比如id=”user_123″或者class=”active-true”，這種方式雖然也能用，但不夠清晰，容易出錯，也不規范。
而使用data-*有以下幾點好處：
- 語義明確：一看就知道是用來存數據的。
- 不干擾瀏覽器行為：普通屬性如果名字沖突了可能會影響原有功能，而data-*是專門為開發者預留的。
- 兼容性好：現代瀏覽器都支持dataset接口讀取這些數據。
- 便于維護：結構清晰，別人接手也更容易看懂你的代碼邏輯。
實際開發中常見的應用場景
舉幾個常見的例子：
-
列表項綁定ID：比如在商品列表中，每個商品項都可以加上data-product-id，這樣點擊某個商品時可以直接獲取它的ID，不用再去查找或匹配。
-
控制組件狀態：比如一個按鈕是否可點擊、當前是展開還是收起狀態，可以用data-state=”open”或data-state=”closed”來記錄。
-
前后端交互中介：有時候后端會在模板里直接輸出一些數據到data-*屬性中，供前端JavaScript讀取使用，避免額外請求。
當然，data-*適合存儲少量、不需要持久化的數據。如果你要處理大量數據或需要跨頁面共享狀態，那應該考慮用localStorage、sessionstorage或者專門的狀態管理工具。
基本上就這些。別看它簡單，但在實際開發中非常實用，尤其配合JavaScript操作DOM的時候，能省不少事。
