HTML5 Web Cache and application cache (cookie, session), html5cookie

Last Update:2018-01-31 Source: Internet

Author: User

Tags sessionstorage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 Web Cache and application cache (cookie, session), html5cookie

Before introducing HTML5 web Cache, let's take a look at cookies and sessions:

Session:

Because HTTP is stateless, who are you? What did you do? Sorry, the server is unknown.

As a result, session appears, which stores user information on the server for future use (such as user name and shopping cart products ).

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

Session Working principle: Creates a session id (core!) for each user !!!). The session id is stored in the cookie. That is to say, if the cookie is disabled by the browser, the session will become invalid! (But it can be implemented in other ways, such as passing session IDs through URLs)

Session is generally used for user authentication.

Cookie:

Purpose: To encrypt the data stored on the local client by marking the user identity on the website ).

When a user accesses a webpage, the name is recorded in the cookie;
You can read user access records from cookies the next time you access the webpage.

The cookie will be carried in the same source http Request (even if it is not needed), that is, it will be passed back and forth between the client and the server!

The cookie data size cannot exceed 4 kb.

Cookie validity period: the cookie validity period has been valid until the cookie validity period is set, even if the browser is disabled!

LocalStorage & sessionStorage:

In the early days, cookies were widely used in local cache, but web storage needed to be safer and faster!

This data will not be stored on the server (stored on the client), and will not affect server performance!

SessionStorage and localStorage data storage also have size restrictions, but they are much larger than cookies, and can reach 5 MB or even larger!

LocalStorage: no time limit for data storage!

SessionStorage: It stores session data, so data is deleted after the user closes the browser (Tab/window!

HTML5 web storage support:

IE8 or above, modern browser.

Data is stored as key-value pairs:

LocalStorage and sessionStorage both have the following methods:

LocalStorage. setItem (key, value): Set (SAVE) data; equivalent to localStorage. key = value!
LocalStorage. getItem (key): Get Data
LocalStorage. removeItem (key): delete a single data
LocalStorage. clear (): delete all data
LocalStorage. key (index): obtains the key value of an index.

<! DOCTYPE html>

Program running result:

Note: Key-value pairs are saved as strings. You must change the type as needed (for example, add the key-value pair to the Number type ).

HTML5 Application Cache ):

By creating a cache manifest file, web applications can be cached and accessed without the network status!

Application Cache advantages:

1. offline browsing;
2. Faster: cached resources are loaded faster;
3. reduce browser load: the client will only download or update changed resources from the server

Support:

IE10 or above, modern browser.

Usage:

<!DOCTYPE html>

Note: To enable application cache, you must specify the manifest attribute (Extension:. appcache). If the manifest attribute is not specified, the page will not be cached (unless this page is specified in the manifest file !)

Configure the MIME-type: text/cache-manifest correctly on the server.

Manifest file:

Manifest is a simple text file that informs the browser of cached content and non-cached content!

Manifest can be divided into three parts:

Cache manifest: the files listed in this item will be cached after the first download!

NETWORK: the files listed in this item need to be connected to the server over the NETWORK and will not be cached!

FALLBACK: This option lists the rollback pages when the page cannot be accessed (for example, the 404 page )!

Test. appcache:

Cache manifest #2017 11 21 v10.0.1/test.css/logo.gif/main. jsNETWORK/login. php/register. phpFALLBACK #/html/when files in the directory cannot be accessed, replace/html with/offline.html // offline.html

Update application cache:
1. Clear the browser cache!
2. The manifest file is changed (#: indicates the comment, and if it is changed to #2018 1 1 v2.160.0, the browser will cache it again !)
3. Update the application cache!

Web Workers:

Web workers is the javascript running in the background. It is independent of other scripts and does not affect page performance!

When a script is executed on an HTML page, the page does not respond unless the script is loaded!

Supported: IE10 or above, modern Browser

Example: html file:

<! DOCTYPE html> 
TestWorker. js file:
Var I = 0; function timedCount () {I + = 1; // an important part that returns a message postMessage (I) to the html page; setTimeout ('timedcount ()', 500);} timedCount ();
Note 1: Generally, web worker is not used for such a simple task, but for tasks that consume more CPU resources!
Note 2: The "cannot be accessed from origin 'null'" error will be generated in chrome. My solution is to enable apache in xampp and Use http: // localhost.
Disadvantages of web worker:
Because the web worker is located in an external file, it cannot access the following javascript objects:

    
 
    Window object; 
 
    Document Object; 
 
    Parent object.

   
HTML5 server-sent events (server sends events ):
Server-sent events are one-way information transmission. webpages can automatically obtain updates from servers!
Previously: The webpage first asked if there were any available updates. The server sent data for updates (two-way data transfer )!
Support: all 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"; // refresh The output data flush ();
Note: There is no content at the end. You can skip the PHP file "?> "Close!
HTML5 WebSocket:

     
 
     WebSocket is a protocol provided by html5. it establishes full-duplex (similar to telephone) communication over a single TCP connection; 
 
     Only one handshake is required between the browser and the server. A quick channel is formed between the browser and the server, and data can be directly transmitted between the two; 
 
     The browser establishes a WebSocket connection request through javascript, sends data to the server through send (), and onmessage () receives the data returned by the server.

    
WebSocket compatibility with low browsers:

     
 
     Adobe Flash Socket; 
 
     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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More