HTML5 Web cache and application cache (cookie,session)

This article mainly introduces the HTML5 Web cache and Application program cache (cookie,session), small series feel very good, and now share to everyone, including HTML5 source code, but also for everyone to do a reference. HTML5 interested in a little part of the story come and see it

Before you introduce the HTML5 Web cache, come to know the cookie and session:

Session

Since HTTP is stateless, who are you? What have you done? Sorry, the server is not known.

So the session appears, and it stores the user information on the server for future use (such as user name, shopping cart purchases, etc.).

But the session is temporary and the user leaves the site and will be deleted. If you want to store information permanently, you can save it in the database!

Session working principle: Create a session ID for each user (core!!! ）。 The session ID is stored in a cookie, which means that if the browser disables the cookie, the session will expire! (but can be implemented in other ways, such as passing the session ID via a URL)

User authentication usually uses session.

Cookies:

Purpose: The website marks the user's identity and stores the data on the local client (usually encrypted).

1. When a user accesses a webpage, the name is recorded in a cookie;

2. The next time you continue to access the webpage, you can read the user access record from the cookie.

The cookie is carried in the same-Origin HTTP request (even if it is not required), which is passed back and forth between the client and the server!

The data size of the cookie does not exceed 4k

Cookie expiration: Set the cookie to be valid until the time expires, even if the browser is off!

Localstorage & Sessionstorage:

In the early days, cookies were commonly used in local caches, but Web storage needed to be more secure and faster!

This data is not saved on the server (stored on the client) and does not affect server performance!

Sessionstorage and Localstorage data stores also have size limitations, but are much larger than cookies and can reach 5M or even bigger!

Localstorage: No time limit for data storage!

Sessionstorage: By the English meaning is also known, it is the session data storage, so after the user closes the Browser (tab/window), the data is deleted!

HTML5 Web Storage Support:

IE8 above, modern browser.

Data is stored in key-value pairs:

Localstorage and Sessionstorage have the following methods:

1. Localstorage.setitem (Key,value): Set (save) data; equivalent to localstorage.key=value!

2. Localstorage.getitem (Key): Get Data

3. Localstorage.removeitem (key): Delete individual data

4. Localstorage.clear (): Delete all data

5. Localstorage.key (Index): Gets the key value of an index

<! DOCTYPE html>
Program Run Result:


Note: Key-value pairs are saved as strings, and should be changed depending on the requirements (such as adding to number).

HTML5 using program cache (application cache):

By creating a cache manifest file, Web usage can be cached and no network status can be accessed!

Application Cache Advantages:

1. Offline browsing;
2. Faster: Cached resources are loaded faster;
3. Reduce browser load: Clients will only download or update changed resources from the server

Support situation:

IE10 above, modern browser.

Use:

<! DOCTYPE html>
Note: To turn on application cache, specify the manifest property (extension:. appcache), or the page will not be cached if the manifest attribute is not specified (unless the page is specified directly in the manifest file!). ）

The manifest file needs to be configured correctly on the server mime-type:text/cache-manifest.

Manifest file:

Manifest is a simple text file that tells the browser what is cached and what is not cached!

Manifest can be divided into three parts:

Cache MANIFEST: The files listed in this entry will be cached after the first download!

Network: The files listed in this entry need to be connected to the server and will not be cached!

FALLBACK: This item lists the fallback page when the page is inaccessible (for example, page 404)!

Test.appcache:

CACHE manifest#2017 v10.0.1/test.css/logo.gif/main.jsnetwork/login.php/register.phpfallback#/html/When a file in the directory cannot be accessed , replacing/html/with/offline.html/offline.html
Update the application cache situation:
1. The user clears the browser cache!
The 2.manifest file is changed (#: Indicates a comment, and if you change to #2018 1 1 v20.0.0, the browser will be re-cached!) ）
3. Update the program application cache!

Web Workers:

Web workers are JavaScript running in the background, independent of other scripts, without impacting page performance!

When you execute a script on a generic HTML page, the page will not respond unless the script is loaded!

Support: IE10 above, modern browser

Example: HTML file:



<! DOCTYPE html>
Testworker.js file:

var i=0;function timedcount () {    i+=1;    Important part, return a piece of information to the HTML page    postMessage (i);    SetTimeout (' Timedcount () ', 500);} Timedcount ();


Note 1: Usually Web worker is not used for such a simple task, but rather a task that consumes more CPU resources!

Note 2: Running in chrome will result in "cannot is accessed from Origin ' null '" error, my workaround is: xampp to open Apache, Access with http://localhost/.

Web Worker Disadvantages:

Because the Web worker is in an external file, it cannot access the following JavaScript objects:


   

 
    
 
     
Window object;
 
     
Document object;
 
     
The parent object.
 
    

   
HTML5 server-sent Events (Server send event):

The Server-sent event is a one-way message delivery, and the Web page can automatically get updates from the server!

Previous: Web page first asked if there is an update available, the server sends data, updates (bidirectional data transfer)!

Support situation: Modern browsers except IE are supported!

Sample code: HTML file:

<! DOCTYPE html>
test.php:

<?phpheader (' Content-type:text/event-stream '); header (' Cache-control:no-cache '); $time =date (' R '); echo "Data: The server time is: {$time} \ n ";//Flush Output data flush ();
Note: There is no content behind, PHP files can be closed without "?>"!

HTML5 WebSocket:


    

 
     
 
      
WebSocket is a protocol provided by HTML5 to establish full-duplex (similar telephone) communication on a single TCP connection;
 
      
There is only one handshake between the browser and the server, and a fast channel is formed between the browser and the server, which can transmit data directly.
 
      
The browser establishes a WebSocket connection request via JavaScript, sends data to the server via send (), and OnMessage () receives the data returned by the server.
 
     

    
WebSocket How to be compatible with low browsers:


    

 
     
 
      
Adobe Flash sockets;
 
      
ActiveX Htmlfile (IE);
 
      
Send XHR based on multipart encoding;
 
      
XHR based on long polling
 
     

    
WebSocket can be used for communication between multiple tabs!

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.