<!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. js for in 和 for of 的区别
			
    引自:http://es6.ruanyifeng.com/#docs/iterator for...of循环可以代替数组实例的forEach方法. const arr = ['red', 'green ...
    
			
    2. 
						
  2. 全栈之路-微信小程序-SKU开发（代码）
			
    SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...
    
			
    3. 
						
  3. 一些常见的synthesis attribute
			
    Noprune A Verilog HDL synthesis attribute that prevents the Quartus II software from removing a regi ...
    
			
    4. 
						
  4. Python开发第三方必备工具
			
      <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style=&quo ...
    
			
    5. 
						
  5. 路由的配置,侧边栏类名与url的结合运用
			
    var url_array = document.location.pathname.split("/"); s1 = url_array[1]; s2 = url_array[2 ...
    
			
    6. 
						
  6. 19-10-23-L-Mor
			
    ZJ一下: 挺好,T2打表差点出规律(最近拿PFGYL硬卡提升自己几乎没有的打表水平) T1竟然……是个××题 T3的Floyd写死了. T1 简单思考会发现……直接全异或起来就AC 话说T1真叫最大 ...
    
			
    7. 
						
  7. OSGi.NET使用笔记
			
    一手资料来源于“开放工厂”,以下程序将会引用到一个核心文件UIShell.OSGi.dll 目前我对于OSGi这个框架的理解就是,主程序搜索并加载插件,以插件方式开放,便于扩展. 现在开始正式的旅程. ...
    
			
    8. 
						
  8. ArccGIS 10发布WFS服务并加载到Skyline中
			
    下面用ArcGIS Server 10.0将建筑物图层发布为WFS服务. (1)创建mxd文件.ArcMap打开建筑物图层,存为Buildings.mxd文件.注意:必须统一空间参考系,且要与图层的坐 ...
    
			
    9. 
						
  9. bash: express: command not found及vue连接数据库调接口
			
    今天在使用express -e . 的命令时,cmd给我报了一段不识别的错误: bash: express: command not found ,在网上查了一下,有人指出是express4的版本将命 ...
    
			
    10. 
						
  10. Java虚拟机系列（四）---查看GC日志
			
    这一节穿插一点如何在eclipse中配置并查看某个Java应用GC日志的知识点,我也是通过调研知道的,因为书中写的不是很详细,主要是为下一节做准备. 一.eclipse中配置GC 在eclipse中如 ...
    
			
    11.