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