您的位置：首页 > Web前端 > HTML5

HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据

2013-12-27 20:42 881 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>清空localStorage的全部数据</title>

</head>

<body>

<fieldset>

<input type="button" id="btnadd" onClick="add_click()" value="增加数据">

<input type="button" id="btndel" onClick="del_click()" value="清除数据">

<p id="pstauts"></p>

</fieldset>

</body>

<script type="text/javascript" >

function $(id){

return document.getElementById(id);

}

var intNum = 0;

//保存数据函数

function add_click(){

for(var intI = 0;intI <= 5;intI++){

var strKeyName = "strKeyName"+intI;

var strKeyValue = "strKeyValue"+intI;

localStorage.setItem(strKeyName,strKeyValue);

intNum++;

}

$("pstauts").style.display = "block";

$("pstauts").innerHTML = "已保存成功<br>"+intNum+"<br>条记录"

}

//清空数据函数

function del_click(){

localStorage.clear();

$("pstauts").style.display = "block";

$("pstauts").innerHTML = "全部数据已经清除"

}

/*

代码解析：

当用户点击"增加数据"，将使用循环的方式，按执行顺序保存6条数据记录

其键名"strKeyName"与变量intI相连，其值名"strKeyValue"也与intI相连,这些数据

被localStorage对象保存记录,可以再浏览器Chrome中通过单击右键,选择"审查元素"选项,

单击"Resources"选项查看localStorage保存的数据

当用户"点击清除数据"将清空localStorage对象保存数据记录

*/

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航