Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of what the html5 type storage method is, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this html5 type storage method article. Let's take a look at it.

Html5 storage type: 1, local storage "localstorage", suitable for long-term storage data; 2, local storage "sessionstorage", the stored data is automatically deleted after the browser is closed; 3, offline cache "application cache", local cache application required files.

The operating environment of this tutorial: windows7 system, HTML5 version, Dell G3 computer.

Before H6, storage was mainly using cookies. The disadvantage of cookies is that it carries data on the request header and the size is less than 4k. Main Domain pollution.

Main applications: shopping cart, customer login

For IE browsers, there is UserData, the size is 64k, and only IE browsers support it.

HTML5 provides two new ways to store data on the client:

LocalStorage-data storage with no time limit

SessionStorage-data store for a session

1. Local storage localstorage

There is no time limit for the data stored by the localStorage method. After the next day, the second week, or the next year, the data is still available.

LocalStorage: suitable for long-term data storage. Data will not be lost when the browser is closed.

Storage method:

Stored as key-value pairs (Key-Value), permanently stored, never invalidated, unless manually deleted.

Size:

5m per domain name

Support:

Note: IE9 localStorage does not support local files, you need to deploy the project to the server to support it!

Detection method:

If (window.localStorage) {alert ('This browser supports localStorage');} else {alert (' This browser does NOT support localStorage');}

Commonly used API:

GetItem / / fetch records

SetIten// setting record

RemoveItem// remove record

Key// takes the value corresponding to key

Clear// clear record

What is stored:

Array, picture, json, style, script. (anything that can be serialized into a string can be stored.)

two。 Local storage sessionstorage

LocalStorage and sessionStorage in HTML5's local storage API are used the same way, except that sessionStorage is emptied as soon as the page is closed, while localStorage is saved all the time.

3. Offline caching (application cache)

HTML5 introduces the application cache, which can cache the web and use it without the network. Create the application cache by creating the cache manifest file.

Files required by the local cache application

How to use it:

① configuration manifest file

On the page:

... Manifest file:

A manifest file is a simple text file that tells the browser what is cached (and what is not cached).

The manifest file can be divided into three parts:

① CACHE MANIFEST-the files listed under this heading will be cached after the first download

② NETWORK-the files listed under this heading require a connection to the server and will not be cached

③ FALLBACK-the files listed under this heading specify fallback pages (such as 404 pages) if the page is inaccessible.

Full demo:

On CACHE MANIFEST# 2016-07-24 v1.0.0/theme.css/main.js NETWORK:login.jsp FALLBACK:/html/ / offline.html server: the manifest file needs to be configured with the correct MIME-type, namely "text/cache-manifest".

For example, Tomcat:

Manifest text/cache-manifest

Common API:

The core is the applicationCache object, which has a status attribute that represents the current state of the application cache:

0 (UNCACHED): no cache, that is, no page-related application cache

1 (IDLE): idle, that is, the application cache has not been updated

2 (CHECKING): checking, that is, downloading the description file and checking for updates

3 (DOWNLOADING): downloading, that is, the application cache is downloading the resources specified in the description file

4 (UPDATEREADY): update completed and all resources have been downloaded

5 (IDLE): obsolete, that is, the description file for the application cache no longer exists, so the page can no longer access the application cache

Related events:

Indicates a change in the application cache state:

Checking: triggered when the browser looks for updates for the application cache

Error: triggered when an error is sent during checking for updates or downloading resources

Noupdate: triggered when checking the description file and finding that the file has not changed

Downloading: triggered when you start downloading application cache resources

Progress: continuously triggers downloads during the file download application cache

Updateready: triggered after downloading the new application cache on the page

Cached: triggered when the application cache is fully available

Three advantages of Application Cache:

① offline browsing

② increases page loading speed

③ reduces server pressure

Note:

1. Browsers may have different capacity limits for cached data (the limit set by some browsers is 5MB per site)

two。 If the manifest file, or one of the files listed internally, cannot be downloaded properly, the entire update process will be considered a failure, and the browser will continue to use all the old cache.

3. The html that references manifest must have the same origin as the manifest file and be in the same domain

4. Browsers automatically cache HTML files that reference manifest files, which means that if the HTML content is changed, an updated version is required to update it.

5. The CACHE in the manifest file has nothing to do with the location order of the NETWORK,FALLBACK. If it is implicitly declared, it needs to be at the front.

6. The resources in FALLBACK must be of the same origin as the manifest file

7. After you update the version, you must refresh it once to start the new version (there will be a page revisit), and you need to add a listening version event.

8. Even if the manifest property is not set for other pages in the site, the requested resource will be accessed from the cache if it is in the cache

9. When the manifest file changes, the resource request itself triggers the update

Offline caching differs from traditional browser caching:

1. Offline caching is for the whole application, and browser cache is a single file.

two。 When the offline cache is offline, you can still open the page, but the browser cache is not good.

3. Offline caching can actively notify browsers to update resources

This is the end of the article on "what is the storage of html5 types?" Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "what is the storage mode of html5 type". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.