HTML 元素上缓存数据（JS&jQuery方式）

你的名字 2022-05-15 03:59 337阅读 0赞

> 如我们需要暂存的数据信息量较大或字段较多时，可以在元素上暂存数据，通过`data-xxx`的形式，为该元素设置值。通过jQuery的`$(selector).data("xxx")`或者JavaScript的`document.getElementById("id").dataset.xxx`获取该值。

**注意：data-==xxx==的形式,==xxx==必须小写，不要以驼峰的形式命名**

### 1. 赋值(新增) ###

*  JavaScript

const taskIdDiv = document.getElementById('taskId');
    taskIdDiv.setAttribute("data-task-id","48"); //setAttribute() 要给data-xxx属性赋值
    /***************或**********************/
    taskIdDiv.dataset.taskId = "200"; // 使用dataset()方法，取值和赋值要使用驼峰的形式(data-xxx中的xxx要使用驼峰)

*  jQuery

使用`attr()方法`赋值

var taskIdDiv = $("#taskId"); 
    taskIdDiv.attr("data-task-id","50");// attr() 要给data-xxx属性赋值

使用`data()方法`赋值

var taskIdDiv = $("#taskId"); 
    taskIdDiv.data("task-id","100"); //此处注意给xxx赋值，而不是data-xxx

### 2. 取值 ###

*  JavaScript

const taskIdDiv = document.getElementById('taskId');
    taskIdDiv.getAttribute("data-vice-id"); 
    /***************或**********************/
    console.log(taskIdDiv.dataset.taskId);// 使用dataset()方法，取值和赋值要使用驼峰的形式(data-xxx中的xxx要使用驼峰)

*  jQuery

使用`attr()方法`取值

var taskIdDiv = $("#taskId"); 
    taskIdDiv.attr("data-task-id");// attr() 要使用data-xxx形式取值 等同于取属性

使用`data()方法`取值

var taskIdDiv = $("#taskId"); 
    console.log(taskIdDiv.data("task-id")); //此处注意取的是xxx，而不是data-xxx

### 3. 删除 ###

*  JavaScript

const taskIdDiv = document.getElementById('taskId');
    //删除，设置成null，或者delete
    taskIdDiv.dataset.taskId = null;//null
    delete taskIdDiv.dataset.taskId;//undefind

*  jQuery

//removeData() 方法移除之前通过 data() 方法设置的数据
    $(selector).removeData(name);