1、拖放API中源對象與目標對象事件間的數據傳遞： ①創建全局變數——污染全局對象： var 全局變數=null; src.ondragstart=function(){ 全局變數=數據值; } target.ondrop=function(){ console.log(全局變數); } ②使用HT ...
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事件，從而得到本地存儲數據已被修改；
