Home > Developer > Web Develop
This article describes HTML5 supported Web Storage (Web Storage) and the HTML 5 application cache.
Introduction to client Storage dataHTML5 provides two new ways to store data on the client:
The data stored by Sessionstorage is accessible only to pages in the same session and is destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage.
Localstorage is used for persistent local storage, and the data is never expired unless the data is actively deleted.
The previous client store data was done by a cookie, and the problem is that the cookie size is limited, and the cookie is sent in the past every time a new page is requested, so the bandwidth is wasted, and the cookie needs to specify the scope and cannot be called across the domain. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web Storage is only for local "storage" of data.
WEB Storage Storage and accessLocalstorage and Sessionstorage have the same access interface, the bottom has been sessionstorage as an example to illustrate
Interface
Sessionstorage.getitem (key)----Gets the value of the local store for the specified key
Sessionstorage.setitem (key,value)----store value in the key field
Sessionstorage.removeitem (key)----Delete the value of the local store for the specified ke
Sessionstorage.length number of items----sessionstorage
Sessionstorage.clear ()----Empty The Sessionstorage project
Web Storage can not only use their own setitem,getitem and other convenient access, but also can be like ordinary objects with the point (.) Operators, and [] the way the data is stored, like the following code:
storage["Key2"] = "world";
Console.log (Storage.key1);
Console.log (storage["Key2"]);
Sessionstorage and Localstorage provide key () and length to facilitate the implementation of stored data traversal, such as the following code:
var storage = window.localstorage; for (var i=0, len = storage.length; I < len ; i++) { = Storage.key (i); = Storage.getitem (key); Console.log (key + "=" + value);}<!DOCTYPE HTML><HTML><Body><Scripttype= "Text/javascript">if(localstorage.pagecount) {Localstorage.pagecount=Number (Localstorage.pagecount)+1; }Else{Localstorage.pagecount=1; }document.write ("Visits:" +Localstorage.pagecount+ "Time (s).");</Script> <P>Refresh the page to see that the counter is growing.</P><P>Close the browser window, and then try again, the counter will continue to count.</P></Body></HTML>View Code
This example uses localstorage, to achieve the function of page views count, do not refresh a page to complete a count, close the tab or browser reopen, still can count continuously (only the current machine, and ASP. Application objects are different, one is client storage, one server storage). This example replaces Localstorage with Sessionstorage to count the number of times a user accesses (refreshes) a page in the current reply (the same-origin page can be shared sessionstorage).
Introduction to the HTML 5 application cacheWith HTML5, creating a cache manifest file makes it easy to create an offline version of your Web app.
HTML5 introduces application caching, which means that Web applications can be cached and accessed without an Internet connection.
Application caching brings three benefits to your app:
1. If you want to enable application caching, include the manifest attribute in the
2, manifest files need to be configured with the correct mime-type, that is, "text/cache-manifest". Must be configured on the Web server.
3. To create a manifest file (such as Manifestdemo.appcache), the recommended file name extension for the manifest file is: ". AppCache".
Manifest fileThe manifest file is a simple text file that tells the browser what to cache (as well as what is not cached). For the browser, manifest loading is later than other resources, which causes the check manifest process is lagging, the discovery manifest change, all the browser implementation is followed by a silent update resources, to ensure that the next time you browse to apply to the update. In addition, the introduction of manifest pages, even if not included in the cache list, will still be cached by the user agent.
Cache manifest# VERSION 0.3# directly cached files cache:/theme.css/logo.gif/main.js# online linked files network:login.asp# alternatives FALLBACK:/HTML5 //404.html
The manifest file can be divided into three parts:
The first line of CACHE manifest in the manifest file is required.
The resources defined under the CACHE are still available if the network is disconnected. The resource list must be a row for one resource.
Internet access is required for the network definition. After you have defined the cache, you can use the ' * ' number to define the network, that is, other resources are not cached outside the explicitly defined cache list.
Fallback is an alternative to using the back of the alternate page when access to the front path (folder or path) fails.
Important Note: "#" begins with a comment line, but can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes are not re-cached. Updating the date and version number in the comment line is a way to enable the browser to re-cache the file.
Update cacheOnce the app is cached, it remains cached until the following happens:
LZ in this section of the content, search for a lot of other manifest related content and problems, the connection is placed here for friends to view.
Use manifest with caution
HTML5 Offline article
SummaryThe knowledge about HTML5 client storage is relatively brief. Cache related content, LZ just run a sample on the W3school, the online collection of some other relevant information, because the lack of offline environment, no hands-on practice. Well, it took 2.5 hours to write something like this. Let's get here today.
HTML5 Simple Entry Series (iii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
