<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.1.4.2.min.js"></script>
<script>
function MyClick1(){
var userName=$("#txtUserName").val();
var pwd=$("#txtPwd").val();
// sessionStorage.setItem("k_username",userName);
// sessionStorage.setItem("k_pwd",pwd);
localStorage.setItem("k_username",userName);
localStorage.setItem("k_pwd",pwd);
alert("存储成功");
}
function MyClick2(){
localStorage.removeItem("k_username"); //删除k_username的缓存
localStorage.removeItem("k_pwd"); //删除k_pwd的缓存
localStorage.clear(); //删除所有缓存
// alert(localStorage.getItem("k_username"));
// alert(localStorage.getItem("k_pwd"));
// alert(sessionStorage.getItem("k_username"));
// alert(sessionStorage.getItem("k_pwd"));
}
</script>
</head>
<body>
<input type="text" id="txtUserName">
<input type="text" id="txtPwd">
<input type="button" value="按钮1" onclick="MyClick1()">
<input type="button" value="按钮2" onclick="MyClick2()">
</body>
</html>

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。
  • sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。

留言板案例:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
if(localStorage.getItem("k_con")!==null){
"k_con",$("#DCon").html(localStorage.getItem("k_con"));
}
});
function PostCon(){
var sCon=$("#trCon").val();
$("#DCon").append("<div>" +sCon + "</div>" );
localStorage.setItem("k_con",$("#DCon").html());
} //清除
function Clear(){
$("#DCon").html("");
$("#trCon").val("");
localStorage.clear();
}
</script>
</head>
<body>
<div><textarea id="trCon" cols="30" rows="8"></textarea></div>
<div><input type="button" value="发表" onclick="PostCon()"><input type="button" value="清除" onclick="Clear()"></div>
<div id="DCon"></div> </body>
</html>

Html5之localStorage和sessionStorage缓存的更多相关文章

  1. HTML5的LocalStorage和sessionStorage的使用

    本文转载自:http://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html html5中的Web Storage包括了两种存储方式:sess ...

  2. 前端cookie、localStorage、sessionStorage缓存技术总结

    转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.Cookie JavaScript是运行在客户端的脚本,因此一般是不能够设置Sessio ...

  3. HTML5的localStorage和sessionStorage

    HTMl5提供了sessionStorage和localStorage数据存储方法,用于临时或者永久的存储客户端的数据: sessionStorage:用于保存回话数据 localStorage:用于 ...

  4. js的cookies及html5的localStorage、sessionStorage

    1.首先,理解什么是cookies? cookies:存储在客户端,数据量小的,会过期的数据,以字符串形式存储 cookie操作代码示例: <script> window.onload = ...

  5. Html5的localStorage与sessionStorage五种循序渐进的使用方法

    需求:本地记录用户上次输入的内容 使用关键技术:localStorage 第一步:使用jQuery的普通写法 1.JS代码 // 获取window的localStorage对象 var localS ...

  6. HTML5本地缓存localStorage和sessionStorage的操作方法收集

    说明: Web Storage 包含如下两种机制: sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开 ...

  7. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  8. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  9. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

随机推荐

  1. Spring SpringMVC SpringBoot SpringCloud 注解整理大全

    Spring SpringMVC SpringBoot SpringCloud 注解整理 才开的博客所以放了一篇以前整理的文档,如果有需要添加修改的地方欢迎指正,我会修改的φ(๑˃∀˂๑)♪ Spri ...

  2. python数据类型初始1

    int: 1,2,3就是用于计算. bool:主要是用于判断,True,False str:用引号引起来的,'dsldgau','张三'.主要用于储存少量数据,进行操作 list(列表):[1,2,3 ...

  3. 手机端META详细解释

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  4. springmvc-环境配置-架构-配合mybatis-参数绑定

    1.1. Spring入门 1.1.1. Springmvc是什么 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得 ...

  5. Activiti 变量设置

    使用工作流的时候必定会附上一些变量.例如,请假的时候有填写请假理由,天数等等.可以用以下代码实现 public void setVariables(){ /**与任务(正在执行)*/ TaskServ ...

  6. 大批量数据导出excel

    有次面试时,老板问我大批量数据一次性导出会有什么问题 感谢度娘提供,感谢原博主提供 https://www.cnblogs.com/zou90512/p/3989450.html

  7. Mybatis编写配置文件时,需要注意配置节点的顺序

    mybatis-config.xml配置文件配置时,要注意节点顺序 <properties>...</properties> <settings>...</s ...

  8. Leetcode953. Verifying an Alien Dictionary验证外星语词典

    某种外星语也使用英文小写字母,但可能顺序 order 不同.字母表的顺序(order)是一些小写字母的排列. 给定一组用外星语书写的单词 words,以及其字母表的顺序 order,只有当给定的单词在 ...

  9. 基于httpd2.2配置https

    本次演示使用一台主机实现,即自签自演 主机IP:192.168.1.105 开始配置: 1.创建私有CA # cd /etc/pki/CA # touch serial # touch index.t ...

  10. iotop实时监控磁盘io

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...