|
1、拖放API中源对象与目标对象事件间的数据传递： ①创建全局变量——污染全局对象： var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; } target.ondrop=function(){ console.log(全局变量); } ②使用HTML5中拖放API提供的dataTransfer对象 1、拖放API中源对象与目标对象事件间的数据传递： ①创建全局变量——污染全局对象： var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; } target.ondrop=function(){ console.log(全局变量); } ②使用HTML5中拖放API提供的dataTransfer对象： 源对象事件的dataTransfer与目标对象事件的dataTransfer不是同一个对象，但可相互传递数据； src.ondragstart=function(e){ e.dataTransfer.setData('key','value'); } target.ondrop=function(e){ //读取数据传递对象中得到的数据 var data=e.dataTransfer.getData('key'); } HTML5标准中dataTransfer对象可以保存的数据必须有key，key只能叫“text/html”或“text/uri-list”或“Files”； 2、拖放客户端本地图片到网页中显示： 客户端图片文件为拖放源对象，网页中的元素是拖放目标对象； container.ondrop=function(e){ var f0=e.dataTransfer.files[0];//File对象 var fr=new FileReader();//读取文件中的内容 fr.readAsDataURL(0);//把图片作为dataURL来读取 fr.onload=function(){//文件读取完成 var img=new Image();//创建Image元素 img.src=fr.result;//dataURL container.appendChild(img); } } HTML5中新增文件读取相关对象： File——代表一个文件；FileList——代表一个文件列表；FileReader——用于读取一个文件中的内容；FileWriter——用于向一个文件中写出内容； 3、HTML5新特性——Web Worker： ①由于负责渲染/监听的只有一个UI主线程，所有HTML/CSS/JS的执行都在这一个线程内，若页面加载了非常耗时（算法复杂）的JS操作，会阻塞后续的HTMl/CSS/JS渲染和事件监听，所以需要一个类似于创建新线程地方法（JS没有创建新线程的方法）： var w=new Work('xx.js'); 在当前UI主线程中创建并启动一个新的并发的工作线程该线程耗时操作，可能阻塞，但不会影响UI主线程； ②Worker线程的致命问题：不能执行任何DOM操作，不能使用任何DOM或BOM元素——浏览器只允许UI主线程修改DOM树； ③让UI主线程给Worker线程传递数据： UI主线程： var w=new Work('xx.js'); w.postMessage('data'); Worker线程： onmessage=function(event){ var data=event.data; } ④让Worker线程把运算结果传递给UI主线程： Worker线程： postMessage('data'); UI主线程： var w=new Worker('xx.js'); w.onmessage=function(event){ var data=event.data; } ⑤Worker用于执行耗时的JS任务，在一个独立的线程中，可以避免UI主线程的阻塞问题； 4、HTML5新特性——WebStorage： ①Web客户端存储技术： Cookie：兼容性好，但操作繁琐，数据长度限制（4KB）； Flash：大小没有限制，但依赖于Flash环境； Web Storage：大小可达8MB，操作简单，但属于HTML5新特性； IndexeedDB：大小没有限制，使用JS操作的一种客户端数据库，但操作稍显复杂； ②Web Storage新对象之window.sessionStorage： 会话级存储，其中的数据可以在一次会话中的多个页面中共享——数据存储在浏览器进程内存中； sessionStorage.setItem(key,value); var value=sessionStorage.getItem(key); sessionStorage.removeItem(key); sessionStorage.clear(); sessionStorage.key(i); sessionStorage.length; ③Web Storage新对象之window.localStorage： 跨会话级存储（本地存储），其中数据即使再关闭浏览器/电脑，下次仍可以访问——数据存储在文件系统的磁盘文件中； localStorage.setItem(key,value); var value=localStorage.getItem(key); localStorage.removeItem(key); localStorage.clear(); localStorage.key(i); localStorage.length; ④如果localStorage中的数据发生了改变，所有已打开的当前网站的浏览器窗口，都会触发window.onstorage事件，从而得到本地存储数据已被修改；
|