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

川长思鸟来 2022-09-19 13:28 155阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript使用localStorage存储数据

背景以前js都是 `Session` 和 `Cookie` 来存储信息，仿佛我还停留在那个时候，一问同事有没有新的solution，才知道现在已经有 `HTML5 ...

- 日理万妓/ 2024年04月19日 12:17/ 0 赞/ 72 阅读

相关如何在 HTML5 localStorage 中存储对象

问：我想在 HTML5 localStorage 中存储一个 JavaScript 对象，但我的对象显然正在转换为字符串。我可以使用 localStorage 存储

怼烎@/ 2024年03月30日 12:01/ 0 赞/ 80 阅读

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>清空localStorage的全部数据<

川长思鸟来/ 2022年09月19日 13:28/ 0 赞/ 156 阅读

相关 HTML5存储数据----sessionStorage保存与读取临时数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用sessionStorage保存与读

素颜马尾好姑娘i/ 2022年09月19日 12:29/ 0 赞/ 172 阅读

相关 HTML5存储数据--localStorage长期保存数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用localStorage长期保存数据

￡神魔★判官ぃ/ 2022年09月19日 12:29/ 0 赞/ 181 阅读

相关 HTML5本地存储Localstorage

转自 [点击打开链接][Link 1] ———————————————— [HTML5本地存储Localstorage][Link 1] 什么是locals

谁践踏了优雅/ 2022年08月21日 02:28/ 0 赞/ 246 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储,，说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![2011052411382

Bertha 。/ 2022年07月24日 04:29/ 0 赞/ 202 阅读

相关 localStorage怎样存取数据怎样清除localStorage存储的数据

localStorage很多时候用来存储数据非常好，方便在页面中使用某些数据的时候调用首先，通过setItem(key,value)即可存储数据然后用g

我会带着你远行/ 2021年11月10日 16:34/ 0 赞/ 1373 阅读

相关 HTML5 LocalStorage 本地存储

HTML5 LocalStorage 本地存储说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： ![201105

缺乏、安全感/ 2021年09月19日 02:58/ 0 赞/ 460 阅读

相关 H5-localStorage数据存储总结

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了co

骑猪看日落/ 2021年09月14日 05:18/ 0 赞/ 453 阅读