`
hjj20040849
  • 浏览: 115042 次
  • 来自: 广州
社区版块
存档分类
最新评论
阅读更多

现在,HTML5BOM允许在客户端实现较大规模的数据存储,用户可以使用web存储,也可以使用web sql数据库,这两项新增功能为浏览器成为应用程序开发平台奠定了坚持的数据操作基础。

Web存储机制是一中通过字符串形式的key/value对来安全的存储和使用数据的方法,其目标是提供一个更全面的,可以创建交互式Web应用程序的方法。


一、web存储和cookie的对比:

1)首先是容量不同,web存储的存储量更大,更安全,更易于使用,而Cookie的存储量是有限制的。

2)存储的持久性不同,web存储是通过浏览器来永久存储和李大小的数据的方法


二、本地存储和会话存储

在客户端存储数据的类型有两种:

1)localStorage : 本地存储,没有时间限制的数据存储

2)sessionStorage : 会话存储,针对一个会话期的数据存储

 

下面就写一个简单的例子,在客户端持久存储数据

 

	var strDomain = "127.0.0.1";	//定义当前域
	try{
		/**
		    *因为较早版本的FireFox没有实现localStorage,但他提供了globalStorage属性用于指定域创建本地存储区域,其中也可以指定这个域为当前域,因此	
		    * ,下面这句代码可以用来实现localStorage在各浏览器间的兼容
		  **/
		var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain];	//h获取存储区域
		//查看vistorCount是否存在
		//如果存在就读取并加1,增加一次访问统计
		//如果不存在就意味着第一次访问,将其初始化为1
		if(oStorage.visitorCount){
			oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;
		} else {
			oStorage.visitorCount = 1;	
		}
		document.write("欢迎第" + oStorage.visitorCount + "次访问");	//写出访问统计数据
	} catch(err) {
		alert(err.message ? err.message : err.toString());	
	}
 

 

 

结果显示如下:


 

同时我们使用开发人员工具(我使用的是Chrome浏览器)可以清晰的看到在客户端存储的数据。

 

在会话期存储数据

SessionStorage针对一个Session进行数据存储,当用户关闭浏览器窗口后,数据会被删除。

下面的代码用于创建一个提交表单:

 

<body>
	<form action="anotherPage.jsp" method="get">
		<input name="myName" id="myName" type="text" onblur="oStorage.myName.value=this.value">
		<input name="mySubmit" type="submit"/>
	</form>
	<script>
		try{
			var oField = document.getElementById(myName);
			oStorage = window.sessionStorage;
			//查看是否存在myNameValue键
			if(oStorage.myNameValue){
				oField.value = oStorage.myNameValue;
			}
		}catch(err){
			alert(err.message ? err.message : err.toString());
		}
	</script>
</body>
 

 

 

结果显示,同样我们使用开发人员工具可以清晰的看到存储状况:


 

  • 大小: 56.1 KB
  • 大小: 31.7 KB
1
1
分享到:
评论

相关推荐

    HTML本地存储实例

    HTML本地存储,特别是HTML5中的localStorage和Web数据库(Database)技术,是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中,从而提高应用程序的性能,减少...

    HTML5的本地存储

    与传统的Cookie存储方式相比,HTML5本地存储提供了更丰富的功能和更大的存储容量。本地存储主要包括两个API:`localStorage` 和 `sessionStorage`。 #### 二、`localStorage` `localStorage` 是HTML5本地存储机制...

    html5本地存储-公告模块

    总的来说,这个"html5本地存储-公告模块"利用了HTML5的本地存储能力,实现了公告信息的高效展示和用户友好的交互体验。这种技术不仅提高了应用性能,也为用户提供了一种离线访问公告的可能,是现代Web开发中值得学习...

    web-storage:允许使用 HTML 5 本地存储和会话存储 API 的 elm 库

    HTML5的Web Storage API是现代Web开发中一个重要的特性,它为浏览器提供了本地存储数据的能力,解决了传统Cookie在存储大量数据时的限制。这个API主要包括两个部分:localStorage和sessionStorage。 Elm是一种纯函数...

    html5本地数据存储两方案之框架

    - "brianleroux-lawnchair-0.6.3-77-ged3ea57.zip" 和 "zefhemel-persistencejs-v0.2.4-101-gca38084.zip" 是两个流行的JavaScript库,它们抽象了HTML5本地存储接口,使得开发者可以更方便地进行数据操作。...

    HTML5 本地存储实现购物车功能

    HTML5的本地存储功能在现代Web开发中扮演着重要角色,尤其对于提升应用程序的性能和用户体验有着显著影响。在本文中,我们将深入探讨如何利用HTML5的本地存储机制实现一个购物车功能,从而减少对服务器的依赖,提高...

    HTML5 本地数据库操作

    1. Web Storage:HTML5的本地存储主要由两部分组成,即`localStorage`和`sessionStorage`。`localStorage`用于持久化存储,数据在浏览器关闭后依然保留;而`sessionStorage`仅在当前会话中有效,关闭标签页或浏览器...

    突袭HTML5之Javascript API扩展3—本地存储全新体验

    总的来说,HTML5的本地存储API极大地提升了Web应用在数据管理上的效率和用户体验,尤其是在处理大量数据或需要跨页面共享信息的场景下。同时,通过合理使用sessionStorage和localStorage,开发者可以创建更加智能且...

    5个HTML5的常用本地存储方式详解与介绍

    HTML5提供了一些全新的本地存储解决方案,它们是Web开发中非常重要的技术,可以用来存储用户的私有数据,包括数据和资源,以提升用户体验。在HTML5标准之前,主要的存储方式是通过cookies来实现的,但这种方法有一些...

    HTML5 LocalStorage 本地存储刷新值还在

    1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...

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

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

    js实现的使用html5的新本地存储特性,实现的小型前端数据集的管理对象vessel.zip

    在JavaScript中,HTML5的本地存储主要包含两种方式:localStorage和sessionStorage。它们都是基于键值对(key-value pairs)的形式来存储数据,但有以下几点关键区别: 1. **localStorage**: 数据的生命周期是永久...

    angular-simpleStorage:用于 Angular.JS 的 HTML5 本地和会话存储系统

    一个简单易用的 AngularJS 的 HTML5 本地和会话存储系统 基本有用的功能列表: 为 AngularJS 应用程序创建基于会话(选项卡/窗口)的存储和闪存存储 为存储的信息添加过期时间 自动检查存储的信息是否是对象/json ...

    Android开发教程之使用 HTML 5 开启移动 Web 应用程序的本地存储--千锋培训

    HTML5的本地存储分为两种类型:`localStorage`和`sessionStorage`。`localStorage`用于持久化存储,即使浏览器关闭后数据依然存在;而`sessionStorage`则只在当前会话期间有效,当浏览器窗口关闭,数据将被清除。 #...

    html5本地存储 localStorage操作使用详解

    本文主要探讨了HTML5中的两种本地存储形式——`localStorage`和`sessionStorage`,以及它们的用途、限制和API。 1. HTML5的几种存储形式: - **本地存储(localStorage 和 sessionStorage)**:两者都是Web ...

    【 YR-HTML5】Web Storage实现本地留言板

    HTML5引入了两种新的本地存储机制——`localStorage`和`sessionStorage`,它们为Web应用提供了更大的存储空间,并且数据只存在于用户本地浏览器中,不会随着HTTP请求发送到服务器,从而提高了应用性能和安全性。...

    本地存储HTML5,C#

    文件"Local-Storate-HTML5-Csharp.pdf"很可能详细介绍了如何在实际项目中结合HTML5本地存储和C#进行数据管理。阅读这份文档可以帮助你更好地理解这两者之间的协同工作,以及如何在ASP.NET环境中实现高效的前端和后端...

    sessionStorage本地存储数据实例

    其中,`sessionStorage` 是一种重要的本地存储方式,它主要用于在同一个浏览器窗口或标签页内存储用户会话期间的数据。与`localStorage`不同,`sessionStorage`中的数据在浏览器关闭后将被清除,确保数据安全且只...

Global site tag (gtag.js) - Google Analytics