<!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. BASE64Encoder及BASE64Decoder查看源代码方法
			
    一直以来Base64的加密解密都是使用sun.misc包下的BASE64Encoder及BASE64Decoder的sun.misc.BASE64Encoder/BASE64Decoder类.这人个类 ...
    
			
    2. 
						
  2. 01_Spring入门程序
			
    一.什么是Spring? 1.Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 2.spring是一个高度灵活的轻量级框架,其目的是降低企业级应用开发的复杂度.  ...
    
			
    3. 
						
  3. 2019-8-31-C#-性能分析-反射-VS-配置文件-VS-预编译
			
    title author date CreateTime categories C# 性能分析 反射 VS 配置文件 VS 预编译 lindexi 2019-08-31 16:55:58 +0800  ...
    
			
    4. 
						
  4. Luogu P1401 城市(二分+网络流)
			
    P1401 城市 题意 题目描述 N(2<=n<=200)个城市,M(1<=m<=40000)条无向边,你要找T(1<=T<=200)条从城市1到城市N的路,使得最 ...
    
			
    5. 
						
  5. [编织消息框架][netty源码分析]5 EventLoopGroup 实现类NioEventLoopGroup职责与实现
			
    分析NioEventLoopGroup最主有两个疑问 1.next work如何分配NioEventLoop 2.boss group 与child group 是如何协作运行的 从EventLoop ...
    
			
    6. 
						
  6. Activiti 使用小结
			
    自定义表单类型 使用动态表单,需要定义表单的字段以及属性,在WEB流程设计器中没有Default字段(Eclipse中有),给设计带来了一定的困难,下面介绍如何在WEB流程设计器中扩展表单. 首先在s ...
    
			
    7. 
						
  7. 对json对象进行截取并按照某关键字进行排序
			
    json对象截取后三个数据,并按照时间的顺序进行倒叙排序. var json = [{"sent_time":"08:29:09","dist&quo ...
    
			
    8. 
						
  8. dubbo入门学习(五)-----dubbo的高可用
			
    zookeeper宕机与dubbo直连 现象 zookeeper注册中心宕机,还可以消费dubbo暴露的服务. 原因 健壮性 l 监控中心宕掉不影响使用,只是丢失部分采样数据 l 数据库宕掉后,注册中 ...
    
			
    9. 
						
  9. Error-SQLServer：【失败】win7装SQL server2017
			
    ylbtech-Error-SQLServer:[失败]win7装SQL server2017 1.返回顶部 1. 2018年08月15日 22:06:38 USCWIFI 阅读数:5433    版 ...
    
			
    10. 
						
  10. sort方法
			
    作用:对列表进行排序 >>> spam=[2,5,3,14,1,-7] >>> spam.sort() >>> spam [-7, 1, 2, 3 ...
    
			
    11.