Home思洋影视事业部网站建设知识库
0 Comments

Dojo1.6新特性：HTML 5进行时(2)

发布于：2013-08-27  |   作者：广州网站建设  |   已聚集：人围观

基于HTML5 localstorage的dojox.storage.LocalStorageProvider

HTML5 在数据存储方面不仅仅提供了方便的indexed Database Object Store API，还提供了十分有用的Local Storage。 Local Storage也被称作Web Storage、Dom Storage。简单地说其本质就是以键值对保存的Web页面信息。和以前我们常用的cookies一样，可以保存页面相关信息，哪怕用户离开当前页面甚至直接关闭了浏览器。相较于cookies，Local Storage最大的特点就是可以储存更多的信息——cookies最大只能保存4KB数据。同时Local Storage中的数据并不会被传递到服务器端(cookies则会随着http请求被发送)。

LocalStorage的使用方法也十分简便，从LocalStorage获取一个值可以通过



    
	
  1. 
		var value = localstorage.getItem("bar"); 
    2. 




	或更加简便的




    
	
  1. 
		localstorage["bar"]; 
    2. 




	方式获得。



	而向localstorage写一个值可以通过




    
	
  1. 
		localstorage.setItem("bar", "newValue"); 
    2. 




	或更加简便的




    
	
  1. 
		localstorage["bar"] = "newValue"; 
    2. 




	来实现。



	dojo 的dojox.storage 包提供了各类常用的数据存储工具：适用于cookies的CookieStorageProvider，适用于Google gears的GearsStorageProvider，适用于Adobe Air的AirDBStorageProvider、AireFileStorageProvider、 AireEncryptedLocalStorageProvider等。



	其中dojo也专门针对HTML5 local storage特性提供了LocalStorageProvider。



	LocalStorageProvider完全兼容简便的Object Store API，其接口及其主要功能如下：



	put: function( /*string*/ key, /*object*/ value, /*function*/ resultsHandler,/*string?*/ namespace)



	用以保存一对键值。第一个参数为所要保存的数据的索引。第二个参数是所要保存的数据。第三个参数用以处理数据保存结果的回调函数(数据保存可能失败)。最后一个参数为可选的命名空间名。dojo为了更好的管理存储内容，提供了命名空间这一参数，其本质是将命名空间和索引组成一个形为 “__namespace_key”的新索引值，而命名空间的默认值为“default”。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	get: function(/*string*/ key, /*string?*/ namespace)



	用以获取指定命名空间下的所给索引指向的数据。



	第一个参数为所要获取的数据的索引。第二个参数为可选的命名空间名，默认值为“default”。



	remove: function(/*string*/ key, /*string?*/ namespace)



	用以删除指定命名空间下的所给索引指向的数据



	第一个参数为所要获取的数据的索引。第二个参数为可选的命名空间名，默认值为“default”。



	clear: function(/*string?*/ namespace)



	用以清空指定命名空间下的所有数据。参数为可选的命名空间名，默认值为“default”。



	这些API不仅仅与dojox.storage包下的其余provider保持一致，还与dojo.store包中提供的store对象的接口兼容。因此 dojox.storage.LocalStorageProvider和dojo.store包为HTML5的存储体系提供了完整的支持。



	支持HTML5 multiple file input 的 dojox.form.Uploader



	HTML5 中对各种标签都进行了增强，其中也不乏对于各类HTML控件的改进。其中input标签就获得了名为multiple的新属性。以前HTML中的 input标签只能选择单个文件，而有了multiple属性之后，你可以使用input标签一次性选择多个文件。如有一个input控件：




    
	
  1. 
		<input multiple="multiple" id="uploadfile" type="file" name="uploaddfile"></div> 
    2. 




	你可以点击浏览按钮之后在文件选择窗口中一次性选择多个需要的文件。并且可以通过如下代码获取选择的文件信息：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		var files = document.getElementById("uploadfile").files; 
    2. 




	input标签的文件选择功能往往被应用于文件的上传中。而dojo 1.6中的dojox.form.uploader则很好的利用了HTML5这一新特性实现了基于HTML5的多文件上传。



	首先dojox.form.Uploader会判断当前的浏览器是否支持HTML5的增强版input标签，如果支持，那么dojox.form.Uploader将会使用带有multiple属性的input标签。



	dojx.form.Uploader提供了以下API对HTML5的多文件上传进行支持：



	getFileList: function()



	用以获取当前选择的文件信息。本质是获取对应的input标签下的files数据进行整理，并为每个文件添加索引。



	upload: function(/*Object ? */formData)



	用以上传指定数据(文件)，dojox.form.uploader.plugins.HTML5具体实现了该方法的HTML5版本(还有Flash和 Iframe两种版本可选，分别由其余两个插件实现)。该方法会判断当前的浏览器是否支持FormData(Firefox 4以上和Webkit内核的浏览器基本都支持)，若支持则使用该方式上传，否则使用binary格式上传。



	submit: function(/* form Node ? */form)



	用于当dojox.form.Uploader处于一个form表单之中时，同时上传文件及表单内其他信息。



	reset: function()



	用以清除当前选择的所有文件，还不支持清除单个指定的文件。



	有了dojox.form.Uploader，你可以很方便的创建一个基于HTML5的多文件上传控件，并使用其API对其进行控制。当然，dojo也为不支持HTML5这一新特性的浏览器提供了其他解决方案。你可以发现在dojox.form.uploader.plugins包下除了HTML5之外还有 IFrame和Flash两种插件。如果浏览器不支持HTML5的多文件选择功能，那么dojox.form.Uploader会自动尝试使用这两个插件来实现多文件上传。你无需为了让代码可以跨平台而花费任何精力。



	总结



	现在我们可以发现，在Dojo中，HTML5其实早已应用在各个方面，从数据存储到图形绘制，从代码风格到具体控件。相信在将来的版本中，Dojo会一如既往的融入各种新技术、兼容各种新标准，提供更好的用户体验!


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机