HTML5_06 drag-and-drop API, Worker thread, Storage, html5_06worker

HTML5_06 drag-and-drop API, Worker thread, Storage, html5_06worker

1. data transmission between the source object and the target object event in the drag-and-drop API:
① Create a global variable -- pollute the global object:
Var global variable = null;
Src. ondragstart = function (){
Global variable = data value;
}
Target. ondrop = function (){
Console. log (global variable );
}
② Use the dataTransfer object provided by the drag-and-drop API in HTML5:
The dataTransfer of the source object event is not the same as the dataTransfer of the target object event, but data can be transmitted to each other;
Src. ondragstart = function (e ){
E. dataTransfer. setData ('key', 'value ');
}
Target. ondrop = function (e ){
// Read the data obtained from the data transmission object
Var data = e. dataTransfer. getData ('key ');
}
In HTML5 standard, the data that the dataTransfer object can store must have a key. The key can only be called "text/html", "text/uri-list", or "Files ";
2. Drag and Drop the local image of the client to display it on the webpage:
The client image file is the drag-and-drop source object, and the elements in the webpage are the drag-and-drop target object;
Container. ondrop = function (e ){
Var f0 = e. dataTransfer. files [0]; // File object
Var fr = new FileReader (); // read the content in the file
Fr. readAsDataURL (0); // read the image as a dataURL
Fr. onload = function () {// File Read completed
Var img = new Image (); // create an Image Element
Img. src = fr. result; // dataURL
Container. appendChild (img );
}
}
Newly Added object reading in HTML5:
File -- represents a File; FileList -- represents a File list; FileReader -- is used to read the content of a File; FileWriter -- is used to write content to a File;
3. New HTML5 features-Web Worker:
① Because only one main UI thread is responsible for rendering/listening, all HTML, CSS, and JS executions are in this thread. If the page is loaded, it takes a very long time (complicated algorithm) JS operations will block subsequent HTMl/CSS/JS rendering and event listening. Therefore, a method similar to creating a new thread location is required (JS does not create a new thread ):
Var w = new Work ('xx. js ');
Create and start a new concurrent working thread in the current UI main thread. This thread is time-consuming and may be blocked, but will not affect the UI main thread;
② Fatal problem of the Worker thread: No DOM operations can be performed, and no DOM or BOM elements can be used. The browser only allows the UI main thread to modify the DOM tree;
③ Let the UI main thread pass data to the Worker thread:
Main UI thread:
Var w = new Work ('xx. js ');
W. postMessage ('data ');
Worker thread:
Onmessage = function (event ){
Var data = event. data;
}
④ Let the Worker thread pass the operation result to the UI main thread:
Worker thread:
PostMessage ('data ');
Main UI thread:
Var w = new Worker ('xx. js ');
W. onmessage = function (event ){
Var data = event. data;
}
⑤ Worker is used to execute time-consuming JS tasks. In an independent thread, blocking of the main UI thread can be avoided;
4. New HTML5 features-WebStorage:
① Web Client storage technology:
Cookie: good compatibility, complicated operations, and limited data length (4 kb );
Flash: There is no size limit, but it depends on the Flash environment;
Web Storage: up to 8 MB in size, simple operation, but a new HTML5 feature;
IndexeedDB: no size limit. It is a client database operated by JS, but the operation is slightly complicated;
② Window. sessionStorage of the new Web Storage object:
Session-level storage, where data can be shared among multiple pages in a session-data is stored in the browser process memory;
SessionStorage. setItem (key, value );
Var value = sessionStorage. getItem (key );
SessionStorage. removeItem (key );
SessionStorage. clear ();
SessionStorage. key (I );
SessionStorage. length;
③ Window. localStorage of the new Web Storage object:
Cross-session-level storage (local storage), where data can be accessed next time even if the browser/computer is closed-the data is stored in the disk file of the file system;
LocalStorage. setItem (key, value );
Var value = localStorage. getItem (key );
LocalStorage. removeItem (key );
LocalStorage. clear ();
LocalStorage. key (I );
LocalStorage. length;
④ If the data in localStorage changes, the window. onstorage event will be triggered in all browser windows of the current website, so that the local storage data has been modified;