HTML 5 - API, Web Storage, SSE, Sockets, Microdata (Part-II)

HTML 5

In this article, we will cover following areas:

HTML 4 vs HTML 5 Input Types
Web Storage & Types
Server Sent Events (SSE)
Web Sockets
Microdata

HTML 4 & HTML 5 Input Types
HTML 4
password
checkbox
radio
submit
file
image
hidden
select
HTML 5
datetime (text input)
url
email
range (Range bar)
number
time
week
month
date
datetime-local (calendar)

Web Storage & Types
Session Storage
Browser tab specific storage
Stores key-value pair
Use JSON.stringify() and JSON.parse() for objects, arrays etc.
Example
Set Value

sessionStorage.setItem("name", "Hardik");
sessionStorage.name = "Hardik";
sessionStorage.obj = JSON.stringify({ name: "Hardik" });

Get value

sessionStorage.getItem("name");
sessionStorage.name //returns "Hardik"
JSON.parse(sessionStorage.obj) //returns {name: "Hardik"}

Clear Storage

sessionStorage.clear();

Local storage
Common across browser tabs
Stores key-value pair
Use JSON.stringify() and JSON.parse() for objects, arrays etc.
Example
Set Value

localStorage.setItem("name", "Hardik");
localStorage.name = "Hardik";
localStorage.obj = JSON.stringify({ name: "Hardik" });

Get value

localStorage.getItem("name");
localStorage.name //returns "Hardik"
JSON.parse(localStorage.obj) //returns {name: "Hardik"}

Clear Storage

localStorage.clear();

Web SQL
Relational, local browser storage
Methods
openDatabase
executeSql
openDatabase()
Syntax
var db = openDatabase(
Database_Name,
Version_Number,
Display_Name,
Size_of_database,
Creation_callback
);
Example
var db = openDatabase(
"MyAppDb",
"1.1",
"MyAppLoggerDB",
200,
myDbCreationCallback
);
executeSql()
Example
db.transaction(function (tx) {
tx.executeSql(
"SELECT * FROM LOGS",
[],
function (tx, results) {
var len = results.rows.length,
i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector("#status").innerHTML += msg;

for (i = 0; i < len; i++) {
alert(results.rows.item(i).log);
}
},
null
);
});

Server Sent Events (SSE)
In traditional web apps, the request will got to server once user clicks on a link and then it will open a new page, its called as client sent events (CSE).
In HTML 5, WHATWG Web Application introduced SSE, where events will flow from Server to Client.
Here, Web Server can Push DOM events from web server to web browser.
So, for connections, Server can ping client rather than client doing Polling.

Web Sockets & Methods
Next-Gen Bi-directional (TCP Socket) communication technology for web apps which operates over single socket & is exposed via JavaScript interface.
Its a TCP Socket, which starts as Http & later Upgrades to TCP
Once connection is established:
data can be sent using send() method
data can be received using onmessage event handler
Create new Web Socket Object

var Socket = new WebSocket(url, [protocol]);

Protocol is optional. If given, it should be sub-protocol
Web Socket Attributes
Socket.readyState : Read-only attribute gives socket/connection state
0: Connection is not yet established
1: Connection is established & communication is possible
2: Connection is going through a Closing handshake
3: Connection is closed or could not be opened
Web Socket Events
Socket.onopen : Socket connection is established
Socket.onmessage: Client receives data from server
Socket.onerror: Error in communication
Socket.onclose: Connection is closed
Web Socket Methods
Socket.send() : Send data to server
Socket.close(): Terminate the existing connection

Microdata
Standardized way to provide Additional semantic in web pages.
Let’s us define customized elements & allows embedding custom properties in web pages.
Group of name-value pairs.
Group is called item & name-value pair called as property.
To create an item, itemscope attribute is used.
To add property to an item, itemprop is used.
Example

<div itemscope>
<p> My name is <span itemprop="name">Hardik</span>.</p>
</div>

Microdata API

document.getItems();

If browser does not support, it will return undefined.

TML 5 - Features, Attributes and Events (Part-I)

Happy Learning :)

Comments