HTML

From ETC Public Wiki
Jump to: navigation, search

Caching and local storage in HTML5

To use caching in HTML5

Step 1: Add below code in your web server configuration or .htaccess.

AddType text/cache-manifest .manifest

Step 2: Create manifest file

# Files under CACHE: will be explicitly cached after they downloaded.
CACHE:
title.php
images/background.png
# Files under NETWORK: It indicates these files require a connection to the server.
NETWORK:
scripts/title.js
scripts/main.js
# Files under FALLBACK: In case of inaccessible resource, second file path will replace first file path.
FALLBACK:
index.html offline.html
title.png offline.png

Step 3: Edit HTML5 file HTML5 tag

If manifest file's name is 'cache.manifest'
<!DOCTYPE html manifest="cache.manifest">


Local storage in HTML5

Local storage in HTML5 consists of key/value pairs.

To store value to local stroage

localStorage.setItem("Key",Value);

To load value from local stoage

localStorage.getItem("Key");

To remove item in local stoage

localStorage.removeItem("Key");


Limitation local storage and caching in HTML5

There is a size limitation to use local storage and cache.

It depeneds on browser, but generally 5MB is limitation.