`
xiaofengyu
  • 浏览: 49047 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML5 学习之web存储localStorage

阅读更多
localStorage 实例:
<!DOCTYPE>
<html>
  <head>
    <title>test2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		function submitL(obj){
			var lname=document.getElementById("logname");
			if(lname.value=='test'){
				localStorage.lname=lname.value;
			}
			var ln=document.getElementById("msg");
			ln.innerHTML=localStorage.lname;
		}
		
		
	</script>
  </head>
  
  <body>
 	   页面计数器<br />
     localStorage <br/>
    <input id="logname" value="" />
    <input type="button" value="submit" onclick="submitL(this);">
    <div id="msg">
    
    </div>
     <div id="numcount">
     
     </div>
   
    <script type="text/javascript">
    	if(localStorage.pagecount){
    		localStorage.pagecount=Number(localStorage.pagecount)+1;
    	}else{
    		localStorage.pagecount=1;
    	}
    	document.write("Visit: "+localStorage.pagecount+" times");
    </script>
    
  </body>
</html>

http://www.w3school.com.cn上说localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。本人小小测试了一下,当我们将数据存储下来后,关闭浏览器再次打开数据还能取出来,但是当你清除掉cookie时它就木有啦,木有啦!这个实际上还是和cookie相关的。其次,本人还发现一个问题是,从history访问页面时,计数器同样会计数。
分享到:
评论

相关推荐

    webSql/LocalStorage

    WebSQL和LocalStorage是两种在浏览器端进行数据存储的技术,它们都是HTML5标准的一部分,为Web应用提供了离线存储的能力。 WebSQL,全称Web SQL Database,是一个基于SQLite的关系型数据库系统,它允许开发者在用户...

    HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用

    使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    LocalStorage是HTML5引入的一种新的Web存储机制,它提供了比传统Cookie更大的存储空间(通常为5MB)。LocalStorage的设计目的是持久化存储,这意味着即使用户关闭浏览器或计算机,存储的数据也不会丢失。它以键值对...

    【温故而知新】HTML5存储localStorage:sessionStorage.md

    HTML5的Web存储技术主要包括`localStorage`和`sessionStorage`两种存储方式。这两种存储方式都是通过JavaScript API提供的,它们允许网站开发者将数据存储在用户的浏览器中。 #### 1. localStorage - **持久性**:...

    HTML5移动Web开发

    HTML5移动Web开发是当前互联网应用开发的重要领域,随着移动设备的普及,越来越多的开发者将目光转向了构建适应各种屏幕尺寸、操作系统且具有良好用户体验的移动Web应用。本资源提供了“HTML5移动Web开发”指南,...

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    HTML5的localStorage是Web应用程序本地存储数据的一种强大方式,它允许开发者在用户的浏览器上持久化地存储关键数据,而无需依赖传统的Cookie或者复杂的HTTP请求。这个"基于html5 localStorage本地存储的一个简易...

    LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统

    LocalStorage是浏览器提供的本地存储机制,允许Web应用程序在客户端存储键值对数据。在学生管理系统中,LocalStorage用于保存学生数据,即使用户关闭浏览器,数据也能保留。当用户添加、修改或删除学生信息时,可以...

    H5打包成安卓app后,js的localstorage失效报错.pdf

    `localStorage`是HTML5引入的一种本地存储机制,允许Web应用在用户的浏览器中存储大量数据,相比于传统的Cookie,`localStorage`提供了更大的存储空间(通常为5MB),并且数据不会随着HTTP请求发送,从而降低了网络...

    HTML5 For Web Designers

    通过学习《HTML5 For Web Designers》,设计师不仅能够掌握HTML5的基本语法,还能了解到如何将这些新特性有效地应用于实际项目中,从而提升网站的设计质量和功能性。 总之,《HTML5 For Web Designers》是一本全面...

    HTML5 本地存储 LocalStorage详解

    HTML5的本地存储机制,尤其是LocalStorage,是现代Web开发中不可或缺的一部分,它允许开发者在用户的浏览器上持久化地存储数据,而无需借助于Cookie或Flash等传统方式。LocalStorage的引入,解决了早期存储技术如...

    基于html5的localstorage的本地存储数据库.zip

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库,这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

    HTML5+CSS3移动Web开发实战(第2版)-电子教案.rar

    还有离线存储API(如AppCache和Service Worker)、Web Storage(localStorage和sessionStorage)以及Web Workers和WebAssembly等,都是HTML5为开发者提供的强大工具。 CSS3则是层叠样式表的最新标准,它的出现极大...

    WEB开发 之 HTML 5 Web 存储.docx

    总结起来,HTML5的Web存储(localStorage和sessionStorage)为开发者提供了强大而灵活的工具,用于在客户端存储和检索数据,极大地提高了Web应用程序的功能性和用户体验。它们解决了cookies的不足,使Web应用能够...

    android与html5的交互——数据库操作,UI操作,以及html5的localStorage、定位功能

    HTML5引入了Web SQL Database和IndexedDB作为离线存储解决方案,允许在浏览器端存储大量数据。在Android应用中,通过使用Cordova(前身是PhoneGap,如DroidGapDemo所示)框架,可以无缝集成这些功能。Web SQL ...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    HTML5的Web Storage技术是网页应用中数据存储的重要方式,相较于传统的Cookie,它提供了更高效、更大容量的本地存储能力。Web Storage分为两种类型:localStorage和sessionStorage。 1. localStorage: ...

    解析HTML5中的新功能本地存储localStorage

    HTML5中新增的localStorage为Web应用提供了更为方便的数据存储手段。不同于以往的Cookie,localStorage能够存储更多的数据,并且不会被发送到服务器。本内容将深入解析localStorage的存储机制、使用方法以及如何在...

    JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    在现代Web应用中,本地存储(Local Storage)是JavaScript中一种重要的数据持久化技术,它允许开发者在用户的浏览器上存储键值对数据,即使关闭浏览器后数据仍然保留。本示例将详细介绍如何利用JS和HTML5的...

    html5简易Web留言本

    在这个"html5简易Web留言本"项目中,可能采用了localStorage来存储用户的留言。通过JavaScript的API,可以方便地进行数据的读写操作。例如,当用户在留言表单填写内容并提交时,JavaScript代码会捕获提交事件,将...

Global site tag (gtag.js) - Google Analytics