HTML5 okiem .NET-owca - odc. 4

Tym razem trochę notatek o web i session storage w HTML5 oraz o webworkerach.

Web Storage

Local + Session

Bezpieczeństwo

• sesja
• domena

Pojemność

• od 2 do 10 MB
• kontrolowana przez klienta

Web Storage vs Cookies

• większa pojemność
• tylko po stronie klienta

Web Storage vs IndexedDB

• klucz-wartość, bez zapytań
• proste API
• szeroka dostępność

API

window.localStorage

• key
• [‘key’]
• getItem(‘key’)
• setItem(“key”,”value”)
• removeItem(“key”)
• clear()
• length
• remainingSpace

Własne atrybuty data-*:  <span id=”price” data-value=”999.99”>999.99$</span>

Session Data

windows.sessionStorage

• setItem(“key”, dataString)   //var dataString = JSON.stringify(data);
• getItem(“key”)  // var data = JSON.parse(…);
• …

Storage Event

windows.addEventListener(“storage”, displayStorageEvent, false);

function displayStorageEvent(e) {  //e.key, e.newValue, e.oldValue, e.url, e.storageArea - referencja na local lub session storage}

typeof(window.onstorage) == “undefined” - sprawdzanie wsparcia

Web Workers

• Dedicated
• Shared

Brak dostępu do

• DOM
• Window (parę wyjątków read-only)
• hostującej strony

Dostęp do

• Navigator (appName, appVersion, platform, userAgent)
• Timers
• XmlHttpRequest

var worker = new Worker(“worker.js”);

worker.onmessage = messageHandler;

worker.onerror = errorHandler;

worker.postMessage(parameter);

function messageHandler(e) { //e.data }

function errorHandler(e) { //e.message }

 

worker.js

function messageHandler(e) { //start:  e.data }

…

postMessage(results);

addEventListener(“message”, messageHandler, true);

 

string, JSON f.e  args = { Command: “”, Message: “”, Value: 0 };

Sterowanie workerem

worker.terminate();

lub przekazywanie własnych argumentów + this.close() w workerze