Before H5, storage was mainly used with cookies. The disadvantages of cookies are with data on the request head, and the size is within 4K. Lord Domain pollution.
Main applications: shopping cart, customer login
For the IE browser, there are UserData, the size is 64K, only supported by IE browser.
TargetStorage in a key-value manner, permanent storage, never fail, unless it is deleted manually.
size:Each domain name 5M
Support situation:Note: IE9 LOCALSTORAGE does not support local files. It needs to be supported by the project department to the server!
Detection method: if (if (Window.LocalStorage) {Alert ('This Browser Supports LocalStorage');} Else {Alert ('This Browser Does Not Support LocalStorage');} Common API:getItem // take records
setititen // Settings record
Removeitem // Remove Record
Key // take the value corresponding to the key
clear // Clear records
Storage content:Array, pictures, json, style, script. Essence Essence (As long as it can be serialized into a string content, it can be stored)
2. Local storage sessionStorageLocalStorage in HTML5's local storage API is the same as sessionStorage. The difference is that SessionStorage is empty after closing the page, and LocalStorage will always be saved.
3. offline cache (Application Cache)The file required for local cache applications
How to use:① Configure Manifest file
Page:
<! Doctype html> <html manifest = demo.appcache> ... </html>Manifest file:
Manifest file is a simple text file that tells the browser that the cache content (and content that does not cache).
Manifest files can be divided into three parts:
① Cache Manifest -The file listed in this title will cache after the first download
②Network -The files listed under this title need to be connected to the server without being cached
③ FALLBACK -The files listed on this title stipulate that the pages of retreat when the page cannot be accessed (such as page 404)
Full DEMO:Cache manifest# 2016-07-24 v1.0.0/theme.css/main.jsnetwork: login.jsp fallback:/html//offline.htmlOn the server: Manifest file needs to configure the correct Mime-Type, that is, Text/Cache-Manifest.
Such as tomcat:
<mime-mapping> <Extension> Manifest </Extension> <MIME-TYPE> Text/Cache-Manifest </MIME-TYPE> </MIME-MAPPING>>Common API:
The core is the ApplicationCache object. There is a Status attribute that indicates the current state of the application cache:
0 (uncached): No cache, that is, no application cache related to the page
1 (idle): idle, that is, the application cache is not updated
2 (Checking): During the check, it is downloading the description file and checking the update
3 (download): In the download, the application cache is downloading the resource specified in the description file
4 (updateReady): Updated, all resources have been downloaded
5 (idle): abandoned, that is, the description file of the application cache no longer exists, so the page cannot access the application cache
Related events:Indicates changes in the application of the application of the cache state:
Checking: Triggered when the browser searches for the application cache
Error: Trigger when sending an error during checking or downloading resources
NOUPDATE: Triggered when checking the description file and found that the file is not changed
Download: Triggered when downloading the application of cache resources
Progress: Continuously triggered in the process of file download application cache
UpdateReady: The new application cache download on the page triggers
cached: triggers when the application cache is complete available
Three advantages of Application Cache:① offline browse
② Increase the facial income speed of the page
③ Reduce server pressure
Note:
1. The capacity limit of the browser on the cache data may not be the same (the restrictions set by some browsers are 5MB per site)
2. If the Manifest file, or a file listed inside cannot be downloaded normally, the entire update process will be regarded as failure, and the browser will continue to use the old cache
3. Quote the HTML of Manifest must be the same as the Manifest file, under the same domain
4. The browser will automatically cache the HTML file of the Manifest file, which causes the update version to be updated if the HTML content is changed.
5. Cache in the manifest file has nothing to do with network and Fallback. If it is a hidden state
6. The resources in fallback must be the same as the Manifest file
7. After updating the version, it must be refreshed once to launch the new version (the situation of the page will be brushed once), and the monitoring version of the event needs to be added.
8. Even if the other pages in the site are not set up, the request resource can be accessed from the cache in the cache
9. When the Manifest file changes, the resource request itself will also trigger the update
The difference between offline cache and traditional browser cache:1. The offline cache is for the entire application, the browser cache is a single file
2. You can open the page if you have an offline cache disconnection.
3. The offline cache can actively notify the browser to update resources
4.Web SQLRelational database, access through SQL statement
The Web SQL database API is not part of the HTML5 specification, but it is an independent specification, introducing a set of APIS that uses SQL to operate client databases.
Support situation:The Web SQL database can work in the latest version of Safari, Chrome and Opera browser.
Core method: ①Pendatabase: This method uses existing databases or new databases to create a database object. ②TRANSACTION: This method allows us to control a transaction and perform submission or rollback based on this situation. ③ EXECUTESQL: This method is used to perform actual SQL queries. Open the database: var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、 Database size, creation callback Execute the query operation: Var DB = OpenDataBase ('Mydb', '1.0', 'Test Db', 2 * 1024 * 1024); db.transaction unique, name ) ');}); Insert data: Var DB = OpenDataBase ('Mydb', '1.0', 'Test Db', 2 * 1024 * 1024); db.transaction unique, name )'); tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, winty)'); tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, LuckyWinty)');}) ;; Read data: DB.TRANSACTION (Function (TX) {tx.executesql ('select * from win', [], function (tx, results) {var len = results.rows.Length, msg = <p> query record number : +len +</p>; document.queryselector ('#Status'). Innerhtml += msg; for (i = 0; I <len; I ++) {Alert (results.ROWS.ITEM (I) .Name) ;}}, null);});It can be seen from these operations that basically use SQL statements to perform database -related operations. If you can MySQL, this should be easier to use.
5.INDEXEDDBThe index database (INDEXEDB) API (as part of HTML5) is useful for creating an offline HTML5 Web application with rich data -intensive storage data. At the same time, it also helps local cache data, so that traditional online web applications (such as mobile web applications) can run and respond faster.
Asynchronous API:Most of the operations in IndexedDB are not our commonly used calling methods, returning the results of the result, but the mode of request-response, such as opening the database operation
In this way, when we opened the database, we actually returned a DB object, and this object was in Result. As can be seen from the above figure, except for Result. Several important attributes are onerror, onsuccess, onupgradeneeded (when we request the version number of the database and the existing database version number is inconsistent). This is similar to our Ajax request. After we initiated this request, we could not determine when it was successful, so we need to process some logic in the callback.
Turn off and delete: Function closedb (db) {db.close ();} Function deletedb (name) {indexeddb.deletedatabase (name);} Data storage:There is no concept in IndexedDB, but ObjectStore. A database can contain multiple ObjectStore. ObjectStore is a flexible data structure that can store a variety of types of data. In other words, an ObjectStore is equivalent to a table, which is associated with each piece of data stored in it.
We can use a specified field in each record as key values (keypath), or use automatic generating number as key values (keygenrator), or not specified. Different types of choosing keys, the data structure that ObjectStore can store can also be stored.
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.