Offline apps and client storage in JavaScript (cookies, sessionstorage, localstorage)

One, offline application

The so-called offline Web application is an application that can still run if the device is not online.

Developing an offline Web application requires several steps: first, make sure that the app knows if the device is going to surf the internet so that it can do the right thing next, and then the app must have access to certain resources (images, JavaScript, CSS, and so on) to work properly; There must be a local space for the data to be stored, regardless of whether the Internet is not preventing read and write.

1, off-line detection

HTML5 defines a Navigator.online property with a value of true indicating that the device is able to surf the internet with a value of false indicating that the device is offline.

In addition to the Navigator.online property, HTML5 defines two events: online and offline. These two events are triggered separately when the network changes from offline to online or from online to offline.

In order to detect whether the application is offline, after the page is loaded, it is best to get the initial state through Navigator.online. Then, it is through the two events above to determine whether the network connection status changes. When the above event is triggered, the value of the Navigator.online property also changes, but the property must be polled manually to detect changes in the network state.

2. Application Cache

HTML5 's application cache, or AppCache, is specifically designed to develop offline Web applications. AppCache is a buffer that is separated from the browser's cache.

Ii. data storage 1, cookies

is used by the client to store session information. This standard requires the server to send a Set-cookie HTTP header to any HTTP request as part of the response header, which includes session information.

(1) Restrictions

A cookie is bound to a specific domain name in nature. This cookie is included when a cookie is set and the domain name that created it sends a request.

Because the cookie is present on the client computer, some restrictions are added to ensure that the cookie is not used maliciously, and that it does not consume too much disk space.

1, IE6, and lower versions limit up to 20 cookies per domain name

2, IE7 and later version of each domain name up to 50.

3. Firefox limits the maximum of 50 cookies per domain.

4. Opera limits a maximum of 30 cookies per domain.

5, Safari and Chrome have no hard-to-set limits on the number of cookies per domain.

There is also a limit to the size of cookies in the browser. Most browsers have a length limit of approximately 4096B (plus minus 1). For best browser compatibility, it is best to limit the entire cookie length to 4095B (including 4095)

Within.

2. IE User Data

In IE5.0, Microsoft introduced the concept of persistent user data through a custom behavior. User data allows up to 128KB data per document, up to 1MB data per domain name.

<div style = "behavior: url (# default # userData)" id = "dataStore"> </ div>

var dataStore = document.getElementById ("dataStore");
dataStore.setAttribute ("name", "xiaolu");
dataStore.setAttribute ("book", "javaScript");
dataStore.save ("BookInfo");

In this code, two pieces of information are stored on the <div> element. After storing the data with setAttribute (), the save () method was called, and the data space name was specified as BookInfo. After the next page load, you can use the load () method to specify the same data space name to get the data;

dataStore.load ("BookInfo");

alert (dataStore.getAttribute ("name")); // xiaolu
alert (dataStore.getAttribute ("book")); // javaScript

You can explicitly specify that you want to delete an element's data by using the RemoveAttribute () method, as long as you specify the property name. After deletion, you must call Save () again to commit the changes.

dataStore.removeAttribute("name","xiaolu");
dataStore.removeAttribute("book","javaScript");
dataStore.save("BookInfo");

Access restrictions on IE user data are similar to the restrictions on cookies. To access a data space, the script runs on a page that must be from the same domain name, under the same path, and using the same protocol as the stored script.

Unlike cookies, you cannot extend user data access restrictions to more customers. A bit different, the user data by default can be persisted across the session, and will not expire; The data needs to be specifically deleted through the RemoveAttribute () method to free up space.

Cookies and IE user data are not secure and therefore cannot store sensitive information.

third, the Web storage mechanism1. Sessionstorage Object

The Sessionstorage object stores data that is specific to a session, which means that the data is kept only until the browser is closed.

2. Localstorage Object

To access the same Localstorage object, the page must be from the same domain name (invalid subdomain), using the same protocol, on the same port. Data is retained to be deleted via JavaScript or the user clears the browser cache.

Limitations: For Localstorage, most desktop browsers set a limit of 5MB per source, and chrome and safari limit each source to 2.5MB. and the iOS version of Safari and Android version of the WebKit limit is also 2.5MB

The virtuous of sessionstorage is also different from the browser. Some browsers have no limits on the size of sessionstorage, but Chrome, Safari, iOS Safari, and Android WebKit all have a limit of 2.5MB. The ie8+ and opera restrictions on Sessionstorage are 5MB.

3.indexedDB

is a database that holds structured data in a browser. The best feature is to use objects to save data instead of using tables to save data.

The difference between Web storage and cookies

The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.

In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves.

But a cookie is an essential lcookie the role of interacting with the server, as part of the HTTP specification, and the Web storage just to "store" data locally.

Browser support processing IE7 and the following are not supported, other standard browsers are fully supported, it is worth mentioning that IE7, IE6 in the UserData is actually JavaScript local storage solution. With simple code encapsulation you can unify to all browsers that support Web Storage

Both Localstorage and Sessionstorage have the same methods of operation, such as Setitem,getitem,removeitem.

Offline apps and client storage in JavaScript (cookies, sessionstorage, localstorage)