数据缓存
函数列表
函数 | 说明 |
---|---|
data() | 用于在当前jQuery对象所匹配的所有元素上存取数据 |
removeData() | 用于移除在当前jQuery对象所匹配的每一个元素上存储的指定键名的数据项。 |
函数说明
data()
data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。
通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据,请使用removeData()函数。
语法
- jQueryObject.data( [ key [, value ] ])
以指定的键名key存取数据。如果指定了value参数,则表示以键名key存放值为value的数据;如果没有指定value参数,则表示读取之前以键名key存放的数据;如果没有指定任何参数,则以对象形式返回之前存储的所有数据。 - jQueryObject.data( object )
以对象形式同时传入任意多个key-value形式的数据,对象的每个属性就是键名key,属性值就是value。 jQueryObject.data(element, [ key] [, value ] )1.8-
注意:data()函数的所有”存储数据”操作针对当前jQuery对象所匹配的每一个元素;所有”读取数据”操作只针对第一个匹配的元素。
参数说明
参数 | 说明 |
---|---|
key | 可选/String类型 指定的键名字符串。 |
value | 可选/任意类型 需要存储的任意类型的数据。 |
object | Object类型指定的对象,用于封装多个键值对,同时存储多项数据 |
element | Object类型要关联数据的DOM对象 |
返回值
data()函数的返回值是任意类型,返回值的类型取决于当前data()函数执行的是”存储数据”操作还是”读取数据”操作。
如果data()函数执行的是”存储数据”操作,则返回当前jQuery对象本身;如果是”读取数据”操作,则返回读取到的数据。
如果当前jQuery对象匹配多个元素,读取数据时,data()函数只以其中第一个匹配的元素为准。
如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据,则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据,则返回一个空的对象(没有任何属性)。
示例&说明
HTML代码:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
</div>
JQuery代码:
var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
// 返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer
// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
document.writeln( i + "=" + obj[i] + "<br>");
}
/*输出:
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/
//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素,但是读取数据只以第一个li元素n4为准,因此返回undefined
document.writeln( $li.data("name") ); // undefined
var object = {
name: "张三",
age: 18,
score: [87, 23, 56],
options: { gender: "男", address: "水帘洞" }
};
// 同时向所有的div元素以对象形式设置多个key-value数据
// value值可以是任意类型的数据,包括数组、对象等
$("div").data( object );
var $n2 = $("#n2"); // 通过n1、n2都可以读取数据
document.writeln( $n2.data("name") ); // 张三
document.writeln( $n2.data("score") ); // 87,23,56
document.writeln( $n2.data("options") ); // [object Object]
removeData()
removeData()函数用于移除在当前jQuery对象所匹配的每一个元素上存储的指定键名的数据项。
removeData()函数主要用来移除通过data()函数存放的数据。
该函数属于jQuery对象(实例)。
语法
- jQueryObject.removeData( keys )
注意:removeData()会移除当前jQuery对象所匹配的每一个元素上指定键名的数据。
参数说明
参数 | 说明 |
---|---|
key | String/Array类型 指定的键名字符串或数组。 |
如果要同时移除多个键名的数据项,请传入数组形式的参数,数组的每个元素即是需要移除的键名字符串。你也可以传入以空格分隔的字符串,空格隔开的每个子字符串即是需要移除的键名字符串。
如果参数keys是
包含空格的字符串
,例如”a b c”,则removeData()将先判断是否存在键名为”a b c”(字符串本身)的数据项,如果存在则移除该数据,并且不再执行后续的分割等操作。如果不存在,才会根据空格进行分割,移除键名分别为”a”、”b”、”c”(分割后的子字符串)的数据项。如果你存放数据的键名中包含空格(例如”a b”),此时使用removeData()同时移除多个键名的数据项(例如”a b c d”,其中”a b”是一个键名),将无法成功移除包含空格的键名(例如”a b”)。你可以改用数组形式,或者
针对包含空格的键名进行单独移除
。
返回值
removeData()函数的返回值是jQuery类型,返回当前jQuery对象本身。
示例&说明
HTML代码:
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
</div>
JQuery代码:
var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "存储数据");
$li.data("url", "************");
// 同时移除所有li元素上的键名为name的数据
$li.removeData("name");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
// 返回键值name所对应的数据
document.writeln( $n5.data("name") ); // undefined
var $n4 = $("#n4");
// 找不到键名为"desc url"的数据项,接着根据空格进行分割
// 移除键名为"desc"、"url"的数据项
$n4.removeData("desc url");
document.writeln( $n4.data("desc") ); // undefined
document.writeln( $n4.data("url") ); // undefined
$li.data("a", "测试a");
$li.data("b", "测试b");
$li.data("a b", "测试a b");
//只会移除键名为"a b"的数据项
$li.removeData("a b");
document.writeln( $li.data("a") ); // 测试a
document.writeln( $li.data("b") ); // 测试b