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

使用clear来清除localStorage保存对象的全部数据的更多相关文章

  1. Linux和windows下清除svn保存的账号密码信息

    linux是什么用户登录就是什么用户的home下,如root用户就是/root,如果xiangdong就是/home/xiangdong 用Svn时会有一种需求是需要换个帐号测试一下什么的,但往往有缓 ...

  2. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  3. 关于clear与清除浮动

    今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...

  4. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

  5. delphi 中TStringList Clear 方法的时候该对象有没有被释放

    delphi 中TStringList 通过function AddObject(const S: string; AObject: TObject): Integer; 方法添加了一个对象,请问我在 ...

  6. sharedpreferences如何保存对象

    昨天做了一个搜索历史的功能,然后根据搜索的历史可以调回到上一个页面,这里涉及到一个用sharedpreferences保存对象的问题,sharedpreferences是不能够直接保存对象的,我们需要 ...

  7. 保存对象时碰到的问题-列名 'Discriminator' 无效

    今天保存对象时碰到问题: {"列名 'Discriminator' 无效.\r\n列名 'Discriminator' 无效."}  百度了一下,百度找到的一个解决: http:/ ...

  8. 使用JPA保存对象时报nested exception is javax.persistence.RollbackException: Transaction marked as rollbackOnly错误

    使用JPA保存对象时报nested exception is javax.persistence.RollbackException: Transaction marked as rollbackOn ...

  9. STL中list中push_back(对象)保存对象的内部实现

    STL中list中push_back(对象)保存对象的内部实现 1. 在容器中,存放的是对象拷贝 #include<iostream> #include<list> using ...

随机推荐

  1. 16.0 Auth0注册与设置

    首先呢?注册https://manage.auth0.com 填写回调网页,意思是当我们点sign in 那个按钮的时候 会访问这个官网 这个官网又回调下面的网页,不然会报错.这个网站因为我们是开发所 ...

  2. servlet(1)request常用方法

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. req ...

  3. KJMusic完整音乐项目

    KJMusic完整音乐项目 KJMusic是一个完整音乐项目,这个项目从欢迎页面到首页以及音乐播放页面都做得非常不错.并且本音乐支持本地音乐,和音乐电台,支持切换上下首个.本项目还支持侧滑出现menu ...

  4. 学Android开发的人可以去的几个网站

    学Android开发的人可以去的几个网站 1.<IT蓝豹>Android开源项目分享平台国内非常好的一个Android开发者分享站,分享android所有特效,每天都有最新的Android ...

  5. 微擎框架下拉分页（使用js模板引擎）

    1.需要分页的页面,引入一下文件 <script language="javascript" src="\addons\{$_GPC['m']}\template\ ...

  6. 修改 Tomcat Connector运行模式 优化Tomcat运行性能

    omcat是一个小型的轻量级应用服务器,也是JavaEE开发人员最常用的服务器之一.不过,许多开发人员不知道的是,Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运行 ...

  7. Hadoop详细安装步骤

    hadoop安装:(分布式模式)参考地址:http://dblab.xmu.edu.cn/blog/install-hadoop/ http://dblab.xmu.edu.cn/blog/insta ...

  8. linux启动jmeter（二十三），执行./jmeter.sh报错解决方法（转载）

    转载自 http://www.cnblogs.com/yangxia-test 1.l-bash: ./jmeter.sh: Permission denied解决办法:jmeter.sh的执行权限改 ...

  9. idea使用maven打包jar包

    1.在pom.xml中加入以下内容: <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  10. poj2970 The lazy programmer 【优先队列】

    A new web-design studio, called SMART (Simply Masters of ART), employs two people. The first one is ...