H5清空数据记录

最新推荐文章于 2023-12-11 15:09:34 发布

黑妹牙膏有点甜

最新推荐文章于 2023-12-11 15:09:34 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/DHM00/article/details/54730146

版权

本文介绍如何在H5中通过localStorage的clear()方法实现数据的清空功能。示例代码包括HTML、JS和CSS部分，展示了一个简单的按钮点击清空数据的交互。然而，增加数据的功能似乎存在问题。

摘要由CSDN通过智能技术生成

1：
可以调用localStorage的clear()方法来清空数据
2：
localStorage.clear()
clear()是一个无参数的方法，表示清空全部数据
HTML代码
<input id="btnAdd" type="button" value="增加数据" class="inputbtn" onClick="btnAdd_click();">
<input id="btnDel" type="button" value="清空数据" class="inputbtn" onClick="btnDel_click();">
<p id="pStatus"></p>
===
js代码
<script type="text/javascript">
//获取id的方法
function $$(id){
return document.getElementById(id);
}
//单击按钮增加调用
//定义变量
var intNum =0;
function btnAdd_click(){
alert(intNum);
//一个循环
for(var intI=1;intI<=8;intI++){
var strKeyName="strKeyName"+intI;//键名
var strKeyValue="strKeyValue"+intI;//键值
localStorage.setItem(strKeyName.strKeyValue);
intNum++;//递增
}
$$("pStatus").style.display="block";//样式
$$("pStatus").innerHTML="已经保存成功<b>"+intNum+"</b>数据条记录";

}
//单击清空数据
function btnDel_click(){
localStorage.clear();
$$("pStatus").style.display="block";//样式
$$("pStatus").innerHTML="已经全部清空数据"
alert("删除");
}
</script>

====
css代码
#pStatus{
border:#ccc 1px solid;
width:158px;
background-color:#eee;
display:none;
}
====
问题：
实现的了清空功能，但是实现不了增加功能