<!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. jmeter参数化之用户参数
			
    1.     用badboby进行录制,录制完成后保存,用JMeter格式进行保存,如:登陆.jmx 2.     在jmeter中打开保存的文件登陆.jmx. 3.在step1上右击-添加-前置处理 ...
    
			
    2. 
						
  2. 06-6-es6模板字符串
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    3. 
						
  3. [转]浅谈C#中常见的委托
			
    一提到委托,浮现在我们脑海中的大概是听的最多的就是类似C++的函数指针吧,呵呵,至少我的第一个反应是这样的. 关于委托的定义和使用,已经有诸多的人讲解过,并且讲解细致入微,尤其是张子阳的那一篇.我就不 ...
    
			
    4. 
						
  4. Extjs4 的一些语法 持续更新中
			
    一.给GridPanel增加成两行toolbar tbar: { xtype: 'container', layout: 'anchor', defaults: {anchor: '0'}, defa ...
    
			
    5. 
						
  5. JSON操作总结（转自陈新汉）
			
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
    
			
    6. 
						
  6. eureka添加security验证之后，client注册失败
			
    高版本,以下配置已弃用 security: basic: enabled: true 所以需要自定义security配置开启basic认证,参考我的配置类 @Configuration @Enable ...
    
			
    7. 
						
  7. 新手必踩坑之display: inline-block
			
    今日励志语 往日不可追,来日犹可期,祝大家2019年继往开来 迷之间隙 我们创建一个导航列表,并将其列表 item 设置为 inline-block,主要代码如下: <div class=&qu ...
    
			
    8. 
						
  8. vue实现跳转路由
			
    参考vue官方文档:https://router.vuejs.org/zh/guide/essentials/navigation.html // 字符串 router.push('home') // ...
    
			
    9. 
						
  9. mybatis学习：mybatis的二级缓存
			
    一级缓存: 一级缓存是SqlSession级别的缓存.在操作数据库时需要构造 sqlSession对象,在对象中有一个(内存区域)数据结构(HashMap)用于存储缓存数据.不同的sqlSession ...
    
			
    10. 
						
  10. Linux程序包管理初步-rpm的使用
			
    在Linux系统上,一般而言,对于程序包管理器来说分为三类: debian:dpt,dpkg;             (程序包后缀.deb) rhel:rpm (程序包后缀.rpm) suse:rp ...
    
			
    11.