JavaScript Advanced Programming Notes (23)

Offline application and client storage (i) offline detection

The Navigator.online property, a value of true, indicates that the device can surf the Internet, otherwise offline, but differs in different browsers. Using Navigator.online alone does not determine whether the network is connected, but it is still useful to detect if a request has an error.

Online and offline two events when a network becomes offline from offline to online or online.

Detects if the application is offline, after the page is loaded, the initial state is obtained through Navigator.online, and then the two events are used to determine whether the network has changed.

ie6+ (only navigator.online properties supported) Firefox3 Safari 4 Opera 10.6 Chrome IOS 3.2

(ii) Application caching

AppCache is designed to develop offline Web applications. The description file lists the resources to download and cache.

The path to this file is specified in the Manifest property of

The Status property represents the current state of the app cache.

Firefox Safari 4+ Opera 10.6 Chrome

(iii) data storage 1.cookie

The server Set-cookie HTTP headers as part of the response to any HTTP request.

http/1.1 okcontent-type:  text/htmlset-cookie:  name=valueother-header:  Other-header-value

This HTTP setting is a cookie with name, value, and the name and value are passed as URL encoding .

The browser sends information to the server by adding a cookie to each request HTTP header

GET  /index.html  http/1.1Cookie:  name=valueother-header:  other-header-value

① restrictions

There is a limited number of cookies per domain and there are limits to size.

The composition of the ②cookie

Name: Case insensitive. URL encoding must be passed.

Value: The string value stored in the cookie must be encoded by the URL.

Domain: Which domain the cookie is valid for. The default is the domain from which the cookie is set.

Path: A cookie should be sent to the server for that path of the specified domain.

Expiration Time: The timestamp when the cookie should be deleted, and the value is the date in GMT format.

Security flag: Once specified, the cookie is sent to the server only when the SSL connection is used.

Each piece of information as part of the Set-cookie, separated by a semicolon and a space

http/1.1 okcontent-type:  text/htmlset-cookie:  name=value; Expires=mon, 22-jan-07 07:10:24 GMT; domain= . wrox.com; path/; secureother-header:  other-header-value

The domain, path, expiration time, and secure flag are all prompts from the server to the browser, and these parameters are not sent as part of the cookie information sent to the server, only the name value pairs.

③javascript's Cooki

The Document.cookie property of a BOM behaves differently depending on how it is used.

When used to obtain a property value, Document.cookie returns a string of all the cookies available on the current page, a series of name value pairs separated by semicolons, and must be URL-encoded using decodeuricomponent ().

When used to set a value, the Document.cookie property can set a new cookie string that will be parsed and added to the existing cookie, unless the setting name already exists, otherwise it will not be overwritten.

        var cookiename = encodeuricomponent (name) + "=" +encodeuricomponent ("Nicholas") + "; domain=.worx.com; path/";

④ Sub-Cookies

Used to circumvent the limit on the number of cookies under a single domain name of the browser. Common formats:

Name=name1=value1&name2=value2&name3=value3&name4=value4

Sub-cookies are also typically formatted as query strings, and these values can be stored and accessed using a single cookie.

⑤ on the thinking of cookies

2.IE User Data

IE 5 uses persisted user data, first using a CSS element to specify the UserData behavior, and then using the SetAttribute method to save the data, in order to submit the data to the browser also call Save () to tell it the name of the data space. The next time the page loads, you can use load () to specify the same data space to get the data. The RemoveAttribute () method specifies that an element data is deleted.

3.WEB storage mechanism

The purpose of Web stroage is to overcome some of the limitations imposed by cookies, and when data needs to be tightly controlled at the client, there is no need to continually send data back to the server, and its two main objectives are to provide a way to store session data outside of cookies, Provides a mechanism for storing large amounts of data that can exist across sessions.

Sessionstorage and Globalstorage objects exist as window object properties

ie8+ Firefox 3.5+ Chrome 4+ Opera 10.5+

①stroage type

Provides maximum storage space

②seessionstorage Object

Stores data specific to a session, only to the browser, and is used primarily for the storage of small pieces of data that are only for the session.

③globalstroage Object

The goal is to store data across sessions with specific access restrictions.

④localstroage Object

The revised HTML5 specification replaces Globalstorage as a scheme to persist client data.

⑤stroage Events

Any modification to the storage object will trigger the storage event on the document.

⑥ restrictions

Each source has a fixed-size space to hold its own data.

4.IndexedDB

is a database of structured data stored in a browser, and the idea is to create a set of APIs that make it easy to save and read JavaScript objects, and to support queries and searches.

The operation is done asynchronously, with almost every operation registering the OnError or Onsuccess event handler.

① Database

Its greatest feature is the use of objects to save data, rather than using tables.

② Object Storage Space

Using object storage, if the database version does not match the incoming version, you may want to create a new object storage space. When creating the object storage space, you must specify the key as the unique data.

③ transactions

Calling the transaction () method creates a transaction, and any time you want to read or modify the data is done through a transaction.

④ Querying with Cursors

You need to create a cursor inside a transaction in case you need to detect multiple objects. A cursor is a pointer to a result set that points to the first item in the result and to the next item when it is queried for the next instruction.

⑤ Key Range

Represented by an instance of Idbkeyrange.

⑥ Setting the cursor direction

OpenCursor () can accept two parameters.

⑦ Index

Create an index to reference the object storage space before calling the Createinedx () method.

⑧ Concurrency Problems

Call Setversion to complete the operation only if the browser has only one tab page that uses the database.

⑨ restrictions

Only the same-origin pages can not share information across domains, and each source database consumes a limited amount of disk space.

JavaScript Advanced Programming Notes (23)