zoukankan      html  css  js  c++  java
  • 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事件,从而得到本地存储数据已被修改;

  • 相关阅读:
    图像处理、分析与机器视觉读书笔记-------第二章图像及其表达与性质
    win7下VS2015+opencv3.1.0配置
    简单使用普通用户启动tomcat
    漏洞扫描,linux配置规范处理
    linux防火墙开放和禁用指定端口
    CentOS自带定时任务crontab
    linux之dos2unix命令
    CentOS7时间设置问题
    shell去除换行和空格
    log4j日志输出级别高低
  • 原文地址:https://www.cnblogs.com/Jupiter258/p/6063350.html
Copyright © 2011-2022 走看看