<!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. 数据库备份还原——mysqlbackup与mysqldump对比测试
			
    1      环境描述 1.1      硬件环境 服务器类型:华为RH5885 IP: 10.148.128.100 内存: 64G 物理CPU个数:4 CPU核数:8 逻辑CPU个数:64 Int ...
    
			
    2. 
						
  2. java 模拟简单搜索
			
    Java 模拟简单搜索 实体类 package org.dennisit.entity; /** * * * @version : 1.0 * * @author : 苏若年 <a href=& ...
    
			
    3. 
						
  3. 如何做系列(2)- XML转义字符
			
    < < 小于号 > > 大于号 & & 和 &apos; ' 单引号 " " 双引号 也可以使用<![CDATA[ ]]> ...
    
			
    4. 
						
  4. 解决wordpress 5.3更新后Uncaught Typeerror: $ is not a function
			
    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:解决wordpress 5.3更新后Uncaught Typeerror: $ is not a function: 本文通过插件的办法解 ...
    
			
    5. 
						
  5. CodeForces - 1087D
			
    CodeForces - 1087Dhttps://vjudge.net/problem/2115151/origin2*和/叶子结点的个数 #include<iostream> #inc ...
    
			
    6. 
						
  6. ArcMap应用——三维场景中井盖的属性配置
			
    在精细三维场景中,有地面(包括道路面.马路牙子).有部件数据(包括井盖).我们会发现有马路牙子的地方比道路面要高出一部分,比如0.1米,但是雨水井盖却有些在路面上.有些在道路以外.就是说在道路面上的井 ...
    
			
    7. 
						
  7. Java虚拟机系列（五）---垃圾收集（GC）
			
    Java语言最大的优势除了它的平台无关性之外,还有它的自动内存分配和垃圾收集技术,本节我先来总结一下垃圾收集相关的内容.本文将从解答以下三个问题的角度来展开: 1.哪些内存需要回收? 2.什么时候回收 ...
    
			
    8. 
						
  8. PAT甲级——A1040 Longest Symmetric String
			
    Given a string, you are supposed to output the length of the longest symmetric sub-string. For examp ...
    
			
    9. 
						
  9. CentOS 6.5 usb安装
			
    我只说一下将CentOS安装作为服务器的情况,但是适用于普遍的CentOS安装过程,首先下载CentOS的安装镜像文件,有这么几种:CentOS-6.5-x86_64-LiveCD.CentOS-6. ...
    
			
    10. 
						
  10. pycharm 汉化补丁
			
    找了很久,找到了这个比较好的pycharm汉化补丁包,就分享出来 1. 将解压包解压出来 2 . 复制对应的汉化补丁包到 x:\xxx\JetBrains\PyCharm Community Edit ...
    
			
    11.