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事件,从而得到本地存储数据已被修改;

  • 相关阅读:
    Codeforces Round #649 (Div. 2) D. Ehab's Last Corollary
    Educational Codeforces Round 89 (Rated for Div. 2) E. Two Arrays
    Educational Codeforces Round 89 (Rated for Div. 2) D. Two Divisors
    Codeforces Round #647 (Div. 2) E. Johnny and Grandmaster
    Codeforces Round #647 (Div. 2) F. Johnny and Megan's Necklace
    Codeforces Round #648 (Div. 2) G. Secure Password
    Codeforces Round #646 (Div. 2) F. Rotating Substrings
    C++STL常见用法
    各类学习慕课(不定期更新
    高阶等差数列
  • 原文地址:https://www.cnblogs.com/Jupiter258/p/6063350.html
Copyright © 2011-2022 走看看