What types of storage methods are there in html5?
HTML5 storage types: 1. Local storage "localstorage", suitable for long-term storage of data; 2. Local storage "sessionstorage", the stored data is automatically deleted after the browser is closed; 3. Offline cache "application" cache", locally cache files required by the application.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
Before h5, cookies were mainly used for storage. The disadvantage of cookies is that they carry data in the request header, and the size is within 4k. Main Domain pollution.
Main applications: shopping cart, customer login
For IE browser, there is UserData, the size is 64k, only IE browser supports it.
HTML5 provides two new methods of storing data on the client side:
- localStorage - data storage without time limit
- sessionStorage - data for a session Storage
1. Local storage localstorage
The data stored by the localStorage method has no time limit. The data is still available after the next day, week or year.
localStorage: suitable for long-term storage of data, the data will not be lost after the browser is closed;
Storage method:
With key-value pairs (Key- Value), it is stored permanently and will never expire 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 //Get record
setIten//Set record
removeItem//Remove record
key//Get The value corresponding to the key
clear//Clear the content stored in the record
##:
Array, picture, json, style, script. . . (As long as the content can be serialized into a string, it can be stored) 2. Local storage sessionstorageThe localStorage and sessionStorage in the local storage API of HTML5 are the same in usage. The difference is The reason is that sessionStorage is cleared after closing the page, while localStorage will always be saved. 3. Offline cache (application cache) HTML5 introduces the application cache, which can cache the web and use it when there is no network. Create an application by creating a cache manifest file. cache. Local cache files required for applicationUsage:
①Configure manifest fileOn the page:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
Manifest files:
Manifest files are simple text files that tell the browser what is cached (and what is not cached). Manifest files can be divided into three sections: ①CACHE MANIFEST - Files listed under this heading will be cached after the first download
②NETWORK - Files listed under this heading require a connection to the server and will not be cached
③FALLBACK - Files listed under this heading Specifies the fallback page when the page cannot be accessed (such as the 404 page)
Full demo:
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
On the server: The manifest file needs to be configured The correct MIME-type, which is "text/cache-manifest".
<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>
Commonly used API:
The core is the applicationCache object, which has a status attribute indicating the current status of the application cache. : 0 (UNCACHED) : No cache, that is, there is no application cache related to the page 1 (IDLE) : Idle, that is, the application cache has not been updated 2 ( CHECKING): Checking, that is, the description file is being downloaded and checking for updates 3 (DOWNLOADING): Downloading, that is, the application cache is downloading the resources specified in the description file 4 (UPDATEREADY): The update is completed and all resources have been downloaded5 (IDLE): Abandoned, that is, the application cache description file no longer exists, so the page can no longer access the application cacheRelated Events:
Indicates changes in the application cache status: checking: Triggered when the browser looks for updates for the application cache error: When checking for updates or downloading Triggered when an error is sent during the resource noupdate: Triggered when checking the description file and finding that the file has no changes downloading: Triggered when starting to download application cache resources progress: In the file Triggered by continuous downloading during the process of downloading the application cacheupdateready: Triggered when the new application cache on the page has been downloadedcached: Triggered when the application cache is fully availableApplication Cache’s three advantages:
① Offline browsing② Improve page loading speed③ Reduce server pressureNotes:
1. Browsers may have different capacity limits for cached data (the limit set by some browsers is 5MB per site)
2 . If the manifest file or one of the files listed internally cannot be downloaded normally, the entire update process will be regarded as a failure, and the browser will continue to use the old cache
3. The HTML that references the manifest must have the same origin as the manifest file and be in the same location. Under a domain
4. The browser will automatically cache the HTML file that references the manifest file. This means that if the HTML content is changed, the version needs to be updated to be updated.
5. The CACHE in the manifest file has nothing to do with the position order of NETWORK and FALLBACK. If it is an implicit declaration, it needs to be at the front.
6. The resources in FALLBACK must have the same origin as the manifest file
7. Update After completing the version, you must refresh it once before starting the new version (the page will be refreshed once), and you need to add a listening version event.
8. Even if the manifest attribute 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 will trigger an update
The difference between offline caching and traditional browser caching:
1. Offline caching is for the entire application, and the browser cache is a single file
2. Offline caching is broken You can still open the page even if you are online, but the browser caching is not working
3. Offline caching can actively notify the browser to update resources
Related recommendations: "html video tutorial"
The above is the detailed content of What types of storage methods are there in html5?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

The key to using radio buttons in HTML5 is to understand how they work and correctly organize the code structure. 1. The name attribute of each radio button must be the same to achieve mutually exclusive selection; 2. Use label tags to improve accessibility and click experience; 3. It is recommended to wrap each option in a div or label to enhance structural clarity and style control; 4. Set default selections through the checked attribute; 5. The value value should be concise and meaningful, which is convenient for form submission processing; 6. The style can be customized through CSS, but the function needs to be ensured to be normal. Mastering these key points can effectively avoid common problems and improve the effectiveness of use.

The core difference between localStorage and sessionStorage lies in data persistence and scope. 1. Data life cycle: localStorage data is stored for a long time unless manually cleared, and sessionStorage data is cleared after closing the tab; 2. Scope difference: localStorage is shared among all tabs on the same website, and sessionStorage is stored independently; 3. Usage scenario: localStorage is suitable for saving long-term data such as user preferences and login status, sessionStorage is suitable for temporary form data or single session process; 4. API consistency: two operation methods

Yes, it is part of HTML5, but its use has gradually decreased and is controversial. Used to combine the main title with the subtitle so that only the highest level of titles are identified in the document outline; for example, the main title and subtitle can be wrapped in to indicate that they are only auxiliary titles rather than independent chapter titles; however, reasons why they are no longer widely used include: 1. The browser and screen readers are inconsistent support for them, 2. There are simpler alternatives such as using CSS to control styles, 3. The HTML document outline algorithm is not widely supported; despite this, it can still be considered in websites or documents with high semantic requirements; while in most cases, developers tend to use a single, manage styles through CSS and maintain clear title levels.

Declare the document as HTML5 to avoid the browser from entering weird mode; 2. Define the root element and specify the language to improve accessibility and SEO; 3. It includes ensuring correct character encoding, implementing responsive design, and setting page title; 4. Place all visible content, optionally add CSS, favicon and JavaScript links; this template is complete and compatible with modern browsers, and is suitable for any new HTML file.

Server-SentEvents (SSE) is a technology in HTML5 that implements server pushing data to clients in real time, and is suitable for stock market, notification systems and other scenarios. It is based on the HTTP protocol, and remains open after establishing a connection. The server can send updates at any time, supporting automatic reconnection and standard data formats. The front-end receives data by creating an EventSource object and listening to message events. The backend needs to set the correct MIME type (text/event-stream) and keep the connection open and continuously output data stream. When using it, you need to pay attention to cross-domain issues, connection timeouts, browser compatibility and intermediate layer restrictions.

The Schema.org tag helps search engines understand the structured data format of web page content through semantic tags (such as item scope, item type, itemprop); it can be used to define custom vocabulary, methods include extending existing types or using additionalType to introduce new types; in actual applications, keeping the structure clear, using official attributes first, testing code validity, and ensuring that custom types are accessible; precautions include accepting partial support, avoiding spelling errors, and choosing a suitable format such as JSON-LD.

HTML5 tags are used to wrap the main content of a web page. The content should be unique to the page and not included in other page shared parts such as header, footer or navigation menus. It belongs to the semantic element, which helps browsers and assistive technologies understand website structure. 1. It should contain content that directly associates the core purpose of the page, such as article text, page-specific forms, interactive widgets bound to the current page, and media files that are the focus of the page; 2. Use can improve accessibility and SEO, including better screen reader support, clearer DOM structure and enhanced SEO through semantic clarity; 3. It should not be used in components such as footer, sidebar or pop-ups, nor should it be used for content that is repeated across pages, and can only be used once per page; 4. If the page does not have it

HTML5parsershandlemalformedHTMLbyfollowingadeterministicalgorithmtoensureconsistentandrobustrendering.1.Formismatchedorunclosedtags,theparserautomaticallyclosestagsandadjustsnestingbasedoncontext,suchasclosingabeforeaandreopeningitafterward.2.Withimp
