Web Storage & Web Workers

2,155 views
1,950 views

Published on

Web Storage & Web Workers

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,155
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Storage & Web Workers

  1. 1. HTML5 Web Storage(DOM storage) ©Inbal Geffen 2012
  2. 2. Why?● HTTP is stateless● We want to keep record of what the user did● We want to be able to work "offline"● We dont want to force users to signup / login ©Inbal Geffen 2012
  3. 3. Cookies● Used before HTML5 Web Storage● 4KB memory limitation per cookie● Sent in every request● Have a "bad reputation" ©Inbal Geffen 2012
  4. 4. localStorage vs.sessionStorageIn Both● Data is stored as key/value pairs● Data is stored in string form● Use the same API : setItem(), getItem(), clear(), removeItem()● Fire storage event ©Inbal Geffen 2012
  5. 5. localStorage vs.sessionStorageDiffer in scope and lifetime● sessionStorage is stored until the window is closed● localStorage is stored until the storage is cleared● localStorage is synchronized within the browser windows and tabs● sessionStorage - multiple instances of the same window without collision ©Inbal Geffen 2012
  6. 6. Web Storage Support● We must remember that not all browsers support "Web Storage"function checkStorageSupport() { if (!window.localStorage) { alert(This browser does NOT support localStorage); } } ©Inbal Geffen 2012
  7. 7. Web Storage APIsetItem//set Item in local storagelocalStorage.setItem("userName", userName);//can also use immediate set, but this is less recommendedlocalStorage.userName=userName;//set Item in session storagesessionStorage.setItem("userName", userName);//can also use the immediate set, but this is less recommendedsessionStorage.userName=userName; ©Inbal Geffen 2012
  8. 8. Web Storage APIgetItem//get Item in local storagevar userName = localStorage.getItem("userName);//can also use immediate get, but this is less recommendedvar userName = localStorage.userName;//get Item in session storagesessionStorage.getItem("userName);//can also use the immediate set, but this is less recommendedvar userName = sessionStorage.userName; ©Inbal Geffen 2012
  9. 9. Web Storage APIclear(), removeItem//clear the local storagelocalStorage.clear();//remove specific item from local storagelocalStorage.removeItem("userName");//localStorage.getItem("userName") => NULL//clear the session storagesessionStorage.clear();//remove specific item from session storagesessionStorage.removeItem("userName"); ©Inbal Geffen 2012
  10. 10. Web Storage API● Web Storage is an array● localStorage.length● Item in the ith position in the array : localStorage.key(i) ©Inbal Geffen 2012
  11. 11. Storage Event//Fired when performing an operation on the storageif (window.addEventListener) { window.addEventListener("storage", handleStorageEvent, false);} else { // for IE versions below IE9 window.attachEvent("onstorage", handleStorageEvent);};function handleStorageEvent(eventData) { // Do something} ©Inbal Geffen 2012
  12. 12. Things to remember• Local storage persists until it is deleted or the browser’s cache is cleared.• Session storage persists until it is deleted or the browsing context is closed.• Data stored by one browser is not accessible by another browser. For example, data stored by Chrome is not seen by Firefox.• Objects should be stored as strings.• For security reasons, sensitive data should not be stored, especially in local storage.• Changes to a storage area cause a “storage” event to be fired.• As with many other HTML5 features, web storage is not yet implemented consistently. ©Inbal Geffen 2012
  13. 13. HTML5 Web Workers ©Inbal Geffen 2012
  14. 14. THE PROBLEM: JAVASCRIPT CONCURRENCY• JavaScript is a single-threaded environment• Used to be "solved" with asynchronous techniques such as: setTimeout(), setInterval(), XMLHttpRequest, and event handlers• Asynchronous events are processed after the current executing script• Web Workers are the HTML5 solution, enabling multi threading ©Inbal Geffen 2012
  15. 15. Web Workers - Use CasesDoing an action/process on the background, without harming the UIShow something to the user and then we can update the UI with the result.● Updating many rows of local web database● Processing large arrays● Background I/O - fetch data for later● Spell checker● Code syntax highlighting or other real-time text formatting ©Inbal Geffen 2012
  16. 16. Web Workers Support● We need to remember to check browser support for web workersfunction checkWorkerSupport() { if (typeof(window.Worker) === "undefined") alert("Your browser doesnt support HTML5 Web Workers!"); } ©Inbal Geffen 2012
  17. 17. Create Web Worker - 1● Web workers run from an external JS file (We will use a file called primesWorker.js as an example)● Web workers will be called from our HTML file● So we need two files : our HTML file and a JS file● Communication is done using messages : postMessage()● Ths JS file will have the function we would like to run on a different thread● The HTML file will: ○ Call the Web Worker (using javascript) ○ Respond to the Web Workers messages ○ Change the UI ©Inbal Geffen 2012
  18. 18. Create Web Worker - 2Main HTML file - create web worker● Create a new instance of web worker The worker gets the file name as a parameter var worker = new Worker("primesWorker.js");● If the file exists, a new thread will be asynchronously created● Calling the worker: postMessage() worker.postMessage(100);● postMessage() can get one parameter● This is the parameter that will be sent to the worker● So we see we can send messages to the worker from the HTML file ©Inbal Geffen 2012
  19. 19. Create Web Worker - 3Main HTML file - get info from web worker● Getting messages FROM the worker● We need to listen to the message eventworker.onmessage = function (e) { //do something with the message we got from the worker } ©Inbal Geffen 2012
  20. 20. Create Web Worker - 4Main HTML file - errors● Check for errors// Show errors from the worker worker.onerror = function (error) { alert(error.data); } ©Inbal Geffen 2012
  21. 21. Features Available to WorkersDue to their multi-threaded behavior, web workers only has access to a subsetof JavaScripts features: ● The navigator object ● The location object (contains information about the current URL) ● XMLHttpRequest ● setTimeout()/clearTimeout() and setInterval()/clearInterval() ● Importing external scripts using the importScripts() method ● Spawning other web workers ©Inbal Geffen 2012
  22. 22. Workers do NOT have access ● The DOM (its not thread-safe) ● The window object ● The document object ● The parent objectThats why we need to communicate using messages. ©Inbal Geffen 2012

×