HTML5_06之拖放API、Worker线程、Storage存储
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事件,从而得到本地存储数据已被修改;
HTML5_06之拖放API、Worker线程、Storage存储的更多相关文章
- Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic
Atitit usrqbg1821 Tls 线程本地存储(ThreadLocal Storage 规范标准化草案解决方案ThreadStatic 1.1. ThreadLocal 设计模式1 1.2. ...
- 线程本地存储(Thread Local Storage, TLS)简单分析与使用
在多线程编程中, 同一个变量, 如果要让多个线程共享访问, 那么这个变量可以使用关键字volatile进行声明; 那么如果一个变量不想使多个线程共享访问, 那么该怎么办呢? 呵呵, 这个办法就是TLS ...
- 线程本地存储TLS(Thread Local Storage)的原理和实现——分类和原理
原文链接地址:http://www.cppblog.com/Tim/archive/2012/07/04/181018.html 本文为线程本地存储TLS系列之分类和原理. 一.TLS简述和分类 我们 ...
- 线程本地存储TLS(Thread Local Storage)的原理和实现——分类和原理
本文为线程本地存储TLS系列之分类和原理. 一.TLS简述和分类 我们知道在一个进程中,所有线程是共享同一个地址空间的.所以,如果一个变量是全局的或者是静态的,那么所有线程访问的是同一份,如果某一个线 ...
- Netty服务端接收的新连接是如何绑定到worker线程池的?
更多技术分享可关注我 前言 原文:Netty服务端接收的新连接是如何绑定到worker线程池的? 前面分析Netty服务端检测新连接的过程提到了NioServerSocketChannel读完新连接后 ...
- html5的新特性——拖放API
在HTML5之前只能使用鼠标事件模拟出"拖放"效果:HTML5专门为拖放提供了7个事件句柄. 被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2 ...
- 拖放API
拖放功能是电脑用户认为理所应当能够“顺畅运行”的功能,我们有数种方法在浏览器中启用此功能.Windows Internet Explorer 9 和早期版本的 Windows Internet Exp ...
- 模板应用--UI线程与worker线程同步 模仿c# invoke
由之前的一篇博文 <UI线程与worker线程><UI线程与worker线程>引出,UI线程与worker线程“串行化”在win32上实现是多么没有节操的事情,代码编写麻烦不说 ...
- UI线程与worker线程
也谈谈我对UI线程和worker线程的理解 UI线程又叫界面线程,能够响应操作系统的特定消息,包括界面消息.鼠标键盘消息.自定义消息等,是在普通的worker线程基础上加上消息循环来实现的,在这个消息 ...
随机推荐
- NET Core-TagHelper实现分页标签
这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.cnblogs.com/wangrudo ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- 设计模式之行为类模式大PK
行为类模式大PK 行为类模式包括责任链模式.命令模式.解释器模式.迭代器模式.中介者模式.备忘录模式.观察者模式.状态模式.策略 ...
- CSS 3 学习——渐变
通过CSS渐变创建的是一个没有固定比例和固定尺寸的<image>类型,也就是说是一张图片,这张图片的尺寸由所应用的元素的相关信息决定.凡是支持图片类型的CSS属性都可以设置渐变,而支持颜色 ...
- 浅谈java异常[Exception]
学习Java的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:589809992 我们一起学Java! 一. 异常的定义 在<java编程思想 ...
- autocomplete的使用
autocomplete使用分为本地调用方法和读取远程读取数据源的方法 (1)本地调用方法 <script src="Scripts/jquery-1.4.1.min.js" ...
- Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...
- HTML5 标签 details 展开 搜索
details有一个新增加的子标签--summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. 默认状态为 收缩状态 设置为展开状态为 <d ...
- 使用nginx反向代理,一个80端口下,配置多个微信项目
我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎 ...