<!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>