HTML5 & CSS3 Beginner's Guide (3) –html5 new features

Introduction

This article describes some of the new features of HTML5. Mainly includes the following aspects:

• Web Storage

• Location

• Drag and drop

• Server Send Event

Web Storage

The design and conception of HTML5 Web storage is a better mechanism to store the client's network data. It is implemented as a client database through a Web browser that allows Web pages to store data in the form of key-value pairs.

It has the following characteristics:

• Each original site/domain can store up to 5MB of data.

• You can use properties and methods to JavaScript operates data in Web Storage to achieve access.

• like Cookies, you can choose to keep the data (maintained), even if you have left the site, closed the browser tab, exited the browser or turned off the computer.

• unlike Cookies are created by server-side scripts, and Web Storage is created by client script such as JavaScript.

• unlike The data in the Cookies,web store does not automatically accompany every HTTP request on the server side.

• web stored in mainstream Web browsers are native supported, such as Chrome,opera,firefox,safari and IE8 +. In other words, no third-party plugins are required.

Networked storage provides 2 different storage areas-session storage and local storage-they vary in scope and time frame and need to be used in different situations.

 Session Store

Session storage, the data is stored as a string, and will only persist in the current session. When the browser window is closed, the data will be deleted. Session storage is a situation that is dedicated to the same user who uses the same Web site for multiple transactions concurrently in different browsers. Transactions in each browser window get their own backup of the session store, which is different from another transaction in other browser windows. When the user closes the browser window, the session store data that belongs to the window will continue to exist. In this way, the transaction data is not leaked from one browser window to another window. Session storage is the solution that the cookie determines, as stated in the HTML5 Web Storage Specification :

Reference:

"If users use the same site to purchase airline tickets in two different windows. If the site uses cookies to track the tickets that the user has purchased, when the user clicks the page from two windows, the ticket currently being purchased will "leak" from one window to another, potentially causing the user to be able to buy two tickets for the same flight without realizing it.

Session storage must be used to process confidential and sensitive information for network activities such as credit card numbers, social Security numbers, and login certificates. This information is vulnerable to "DNS spoofing", so you should not store more than one single session. ”

How to create and access a sessionstorage:

<type= "Text/javascript">sessionstorage.lastname=  "Smith";d ocument.write (sessionstorage.lastname); </ Script >

Local Storage

Local storage, the data is stored as a string, and will persist (unless you explicitly delete it). Even if the browser window is closed, the data will persist, and if the next access to the same origin is using the same browser, then the data is available. Local storage is designed for storing data that spans multiple browser windows and lasts longer than the current session.

Unlike desktop systems, WEB applications have always lacked the ability to work offline. It's not the same now, HTML5. The presence of local storage has made it possible to work offline. Imagine that you are filling out a multi-page Web form, or writing an article, the deadline is imminent and a sudden network outage occurs. You will lose all the data you have carefully created. With local storage, you can continue to work offline, and the WEB application uses some client-side scripts such as JavaScript to intermittently save your work to local storage.

A Web site allows users to customize the theme and layout of a Web page and save these settings in local storage. In this way, users can see their own personal web pages in subsequent visits.

How to create and access Localstorage:

<script type="text/javascript">localstorage.lastname="  Smith";d ocument.write (localstorage.lastname); </script>

geo-positioning

The HTML geolocation API has only one object, which is the Navigator.geolocation object. You can compare navigator.geolocation to a compass in the browser. Whether the browser supports this API is yet to be confirmed. You can detect whether the browser supports it by writing the following if-else to your own code.

 //  Check whether browser supports Geolocation API or not  if  (navigator.geolocation) //  supported  { //  }   else  //  {alert (  " oop! This browser does not the support HTML5 geolocation.   "  

The Navigator.geolocation object exposes 3 methods GetCurrentPosition (), Watchposition (), and Clearwatch ().

• GetCurrentPosition ()

The GetCurrentPosition () method is used to obtain the user's current location.

Navigator.geolocation.getCurrentPosition (getPosition);

• Watchposition ()

The Watchposition () method is almost identical to the GetCurrentPosition () method. They all return the current location information and have the same method signature-a successful callback function, an erroneous callback function, and a location option object. The only difference is that once the click button is activated, the GetCurrentPosition () method returns the location information, while the Watchposition () method continues to obtain location information once the user device location changes and after the initial session is activated.

The Watchposition () method returns a watch ID, which you can use to stop the Watchpositon () method with the Watch ID when you no longer need to get the location.

• Clearwatch ()

The Clearwatch () method uses the watch ID of the Watchposition () method as a parameter to stop the execution of the Watchposition () method.

Drag and Drop

We're already familiar with dragging and dropping files, folders, and icons on your desktop. Drag-and-drop is a powerful and naturally necessary user interaction for any desktop application. Use a pointer device like a mouse, drag and drop to make copies, insert and delete files and objects on any computer desktop.

The HTML5 Drag and drop API provides native support for browser drag-and-drop operations, making it easier to drag and drop code.

• Set elements to be dragged and dropped

First, to make an element draggable, set the Draggable property to True:

• Drag what

Then, specify what happens when the element is dragged.

In the example above, the Ondragstart property invokes a function, drag (event), which specifies the data to be dragged.

The Datatransfer.setdata () method sets the data type and value of the dragged data:

function Drag (ev) {    ev.dataTransfer.setData ("Text", ev.target.id);}

• Where to put

The OnDragOver event specifies where to place the dragged data.

By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.

This is done by calling the Event.preventdefault () method of the OnDragOver event:

Event.preventdefault ()

• For placement

The drop event occurs when the dragged data is dropped.

In the example above, the OnDrop property invokes a function, Drop (event):

function Drop (EV) {    ev.preventdefault ();     var data=ev.datatransfer.getdata ("Text");    Ev.target.appendChild (document.getElementById (data));}

Server Send Event

The interaction pattern between a traditional user and a Web site is the type of request and response initiated by the user. The user initiates the request through the browser and waits for the server to answer. To check for updates on a particular webpage, the user needs to send a new request to the server by clicking the update/re-login button on the browser. In other words, the server must push the server-side updates without interruption. When information is constantly unpredictable, it is not particularly useful to get some key decision-making information in this way. such as stock price update, news transmission, weather forecast and so on.

When the information arrives, the HTML server sends the event (SSE) to enable the server to send (push) the information to the client, avoiding the need for the server to push continuously. This also enables the site to provide push services to clients without requiring any third-party plugins.

• Server-sent Event-one-way message delivery

The Server-sent event refers to a webpage that automatically obtains updates from the server.

This could have been done before, provided the Web page had to ask if there were any updates available. Events are sent through the server, and updates are automatically reached.

• Receive Server-sent event notifications

The EventSource object is used to send event notifications to the receiving server:

var source=New EventSource ("demo_sse.php"); source.onmessage =function (event) {   document.getElementById ("result"). innerhtml+=Event"<br/>";};

Code Explanation:

• Create a new EventSource object, and then specify the URL of the page that is sending the update ("demo_sse.php" in this case)
• OnMessage event occurs every time an update is received
• When the OnMessage event occurs, the received data is pushed into the element with the ID "result"

• Detect Server-sent Event Support

In the tiy example above, we have written an extra piece of code to detect the browser support of the server sending the event:

if (typeof(EventSource)!=="undefined") {   //  yes! Server-sent Events support!    // Some code ... .. }else{    //  sorry! No server-sent Events support:}

• Server-side Code instances

To make the above example work, you also need a server that can send data updates (such as PHP and ASP).

The syntax of the server-side event stream is very simple. Set the "Content-type" header to "Text/event-stream". Now you can start sending the event stream.

PHP Code (demo_sse.php):

<? PHP Header (' Content-type:text/event-stream '); Header (' Cache-control:no-cache '); $time Date (' R '); Echo "Data:the server time is: {$time}\n\n"; Flush ();? >

ASP Code (VB) (demo_sse.asp):

<%Response.ContentType="text/event-stream"response.expires=- 1 Response.Write ("" & Now ()) Response.Flush ()%>

Code Explanation:

• Set the header "Content-type" to "Text/event-stream"
• No caching of pages is required
• Output send date (always start with "data:")
• Refresh output data to a Web page

Summary

This article describes some of the new features of HTML5 here, in a later article, we will learn HTML5 Canvas knowledge.

HTML5 & CSS3 Beginner's Guide (3) –html5 new features