Home>Web design tutorial>HTML tutorial

HTML5 web cache and application cache (cookie, session)

Author：Eve Cole Update Time：2025-02-02 17:24:01
Before introducing HTML5 web caching, let’s get to know cookies and sessions:

session:

Since HTTP is stateless, who are you? What did you do? Sorry, the server doesn't know.

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

But 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 a database!

How session works: Create a session id (core!!!) for each user. The session id is stored in the cookie, which means that if the browser disables cookies, the session will become invalid! (But it can be achieved in other ways, such as passing the session id through the URL)

User authentication generally uses session.

cookies:

Purpose: Data stored locally on the client side (usually encrypted) for a website to identify a user.

  1. When a user visits a web page, his or her name is recorded in a cookie;
  2. The next time you continue to visit the web page, the user access record can be read from the cookie.

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

The data size of the cookie does not exceed 4k

Cookie validity period: The set cookie validity period is valid until the expiry time, even if the browser is closed!

localStorage & sessionStorage：

In the early days, cookies were commonly used for local caching, but web storage needs to be safer and faster!

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

sessionStorage and localStorage data storage also have size limits, but they are much larger than cookies and can reach 5M or even larger!

localStorage: data storage without time limit!

sessionStorage: As can be seen from the English meaning, it is the data storage of the session, so after the user closes the browser (tab/window), the data is deleted!

HTML5 web storage support:

IE8 or above, modern browser.

Data is stored in key-value pairs:

Both 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 single data
  4. localStorage.clear(): delete all data
  5. localStorage.key(index): Get the key value of an index
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>web storage</title></head><body> <div id=test></div> <script> if (typeof (Storage) != undefined) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = you are: + localStorage.name; console.log( first: + localStorage.name1 + , + localStorage.key(0)); localStorage.removeItem('name1'); console.log(second: + localStorage.name1); console.log(third: + localStorage.getItem('name')); localStorage.clear(); console.log(last: + localStorage.name); } else { document.getElementById('test').innerHTML = Update your browser! Currently the browser does not support stroage; } </script></body></html>

Program running results:

Note: Key-value pairs are stored as strings, and the type should be changed according to requirements (for example, for addition, change to Number type).

HTML5 Application Cache:

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

Application Cache advantages:

1. Offline browsing;

2. Faster speed: Cached resources are loaded faster;

3. Reduce browser load: the client will only download or update changed resources from the server

Support status:

IE10 or above, modern browser.

use:

 <!DOCTYPE html><html manifest=demo.appcache></html>

Note: To enable application cache, you need to specify the manifest attribute (extension: .appcache); if the manifest attribute is not specified, the page will not be cached (unless the page is directly specified in the manifest file!)

The manifest file must be correctly configured with MIME-type: text/cache-manifest on the server.

Manifest file:

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

The manifest can be divided into three parts:

CACHE MANIFEST: Files listed here will be cached after the first download!

NETWORK: The files listed in this item require a network connection with the server and will not be cached!

FALLBACK: This item lists the fallback page when the page cannot be accessed (such as: 404 page)!

test.appcache:

 CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/When the files in the directory cannot be accessed, use /offline.html instead of /html/ / offline.html
Update application cache:

1. The user clears the browser cache!

2.The manifest file is changed (#: indicates a comment, and if it is changed to #2018 1 1 v20.0.0, the browser will re-cache!)

3. The program updates the application cache!

Web Workers:

Web workers are javascript that runs in the background, independent of other scripts and will not affect page performance!

When executing a script on a general HTML page, the page will not respond unless the script is loaded!

Support: IE10 or above, modern browsers

Example: html file:

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>web worker</title></head><body> <p>Count: <output id=count></output></p> <button onclick=startWorker()>Start</button> <button onclick=overWorker()>End</button> <script> var w; function startWorker(){ // Check whether the browser supports web worker if(typeof(Worker) !=='undefined'){ if(typeof(w)=='undefined'){ //Create web worker object w=new Worker('testWorker.js'); } // The event continues to be listened to (even if the external script has completed) unless terminated w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data; }; }else{ document.getElementById('count' ).innerHTML='The browser does not support web workers'; } } function overWorker() { // Terminate web Worker object, releases browser/computer resources w.terminate(); w=undefined; } </script></body></html>

testWorker.js file:

 var i=0;function timedCount() { i+=1; //The important part, return a piece of information to the html page postMessage(i); setTimeout('timedCount()',500);}timedCount();

Note 1: Usually web workers are not used for such simple tasks, but for tasks that consume more CPU resources!

Note 2: Running in chrome will cause the error "cannot be accessed from origin 'null'". My solution is: open apache in xampp and use http://localhost/ to access.

web worker disadvantages:

Since the web worker is located in an external file, it cannot access the following javascript objects:

  1. window object;
  2. document object;
  3. parent object.
HTML5 server-sent events:

The server-sent event is a one-way information transfer; the web page can automatically obtain updates from the server!

Previously: The web page first asked if there were available updates, the server sent the data, and the updates were made (two-way data transfer)!

Support status: All modern browsers except IE support it!

Sample code: html file:

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>sever sent event</title></head><body> <p>sever sent event informations</p> <div id=test></div> <script> // Determine whether the browser supports EventSource if(typeof(EventSource)!==undefined){ // Create an EventSource object var source=new EventSource(test.php); // Event Listen source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br>; }; }else{ document.getElementById('test').innerHTML=sorry, the browser does not support server sent event; } </script></body></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/n;// Refresh output data flush();

Note: There is no content behind, the php file can be omitted?> Close!

HTML5 WebSocket:

  1. WebSocket is a protocol provided by HTML5 to establish full-duplex (telephone-like) communication over a single TCP connection;
  2. Only one handshake operation is required between the browser and the server, and a fast channel is formed between the browser and the server, and data can be transferred directly between the two;
  3. The browser establishes a WebSocket connection request through javascript, sends data to the server through send(), and receives the data returned by the server through onmessage().
How WebSocket is compatible with low-end browsers:

  1. Adobe Flash Socket;
  2. ActiveX HTMLFile(IE);
  3. Send XHR based on multipart encoding;
  4. XHR based on long polling

WebSocket can be used for communication between multiple tabs!

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.

Related Articles