<!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. 
						
  2. 前端cookie、localStorage、sessionStorage缓存技术总结
		
    转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.Cookie JavaScript是运行在客户端的脚本,因此一般是不能够设置Sessio ...
    
		
    3. 
						
  3. HTML5的localStorage和sessionStorage
		
    HTMl5提供了sessionStorage和localStorage数据存储方法,用于临时或者永久的存储客户端的数据: sessionStorage:用于保存回话数据 localStorage:用于 ...
    
		
    4. 
						
  4. js的cookies及html5的localStorage、sessionStorage
		
    1.首先,理解什么是cookies? cookies:存储在客户端,数据量小的,会过期的数据,以字符串形式存储 cookie操作代码示例: <script> window.onload = ...
    
		
    5. 
						
  5. Html5的localStorage与sessionStorage五种循序渐进的使用方法
		
    需求:本地记录用户上次输入的内容 使用关键技术:localStorage 第一步:使用jQuery的普通写法 1.JS代码 // 获取window的localStorage对象 var localS  ...
    
		
    6. 
						
  6. HTML5本地缓存localStorage和sessionStorage的操作方法收集
		
    说明: Web Storage 包含如下两种机制: sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开 ...
    
		
    7. 
						
  7. HTML5本地存储localStorage与sessionStorage
		
    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
    
		
    8. 
						
  8. HTML5 web存储之LocalStorage和sessionStorage
		
    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...
    
		
    9. 
						
  9. HTML5本地存储localStorage与sessionStorage详解
		
    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. P1249 最大乘积
			
    打暴力找规律,都是连续自然数去掉一个 n=int(input()) a=[] cnt=0 i=2 tot=0 ans=1 while tot<=n: tot+=i cnt+=1 a.append ...
    
			
    2. 
						
  2. python   re.sub详解
			
    re.sub(pattern, repl, string, count=0, flags=0) re.sub的含义,作用,功能就是: 对于输入的一个字符串,利用正则表达式(的强大的字符串处理功能),去 ...
    
			
    3. 
						
  3. JavaScript RegExp 对象的三种方法
			
    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...
    
			
    4. 
						
  4. LUOGU P1965 转圈游戏 (Noip 2013)
			
    传送门 解题思路 比较简单的模拟题,转圈一定有一个循环节,而且循环节长度一定小于m,因为循环节是一个%m的剩余系,然后一遍模拟记录下来循环节,快速幂即可. #include<iostream&g ...
    
			
    5. 
						
  5. 19-10-15-W
			
    暴力终于不跪了$\text{QvQ}$ z总j结 考试开始看到几个大字:Day1 Happy-(××终于不用爆〇了哈哈哈哈!!) 开T1.一看,不是在线仙人球嵌套动态网络路径剖分优化的分支定界贪心剪枝 ...
    
			
    6. 
						
  6. python 打印的异常回溯和代码不对应
			
    正在运行的程序没有停止 又重新install了导致site-packages里的代码改变 正在运行的是老代码, 当出现异常时打印的行数是老代码,但显示的行的内容时新代码
    
			
    7. 
						
  7. linux学习(二)-----Linux 的目录结构、远程登录、vi和vim
			
    linux目录结构 基本介绍 linux 的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录“/”,然后在此 目录下再创建其他的目录. 目录结构具体介绍 Linux 目录总结 1.lin ...
    
			
    8. 
						
  8. netcore进程内(InProcess)托管和进程外(out-of-Process)托管
			
    当一个 ASP.NET Core 应用程序执行的时候,.NET 运行时会去查找 Main()方法,因为它是这个应用程序的起点. 然后,Main()方法调用静态类WebHost中的静态方法CreateD ...
    
			
    9. 
						
  9. MySQL用户权限详细汇总
			
    1,MySQL权限体系 mysql 的权限体系大致分为5个层级:全局层级:全局权限适用于一个给定服务器中的所有数据库.这些权限存储在mysql.user表中.GRANT ALL ON .和REVOKE ...
    
			
    10. 
						
  10. LINUX设置SUID，SGID，Stick bit
			
    前面介绍过SUID与SGID的功能,那么,如何打开文件使其成为具有SUID与SGID的权限呢?这就需要使用数字更改权限了.现在应该知道,使用数字 更改权限的方式为“3个数字”的组合,那么,如果在这3个 ...
    
			
    11.