HTML5 Learning Series (vi) HTML5 local storage and local database

How can a website store more data in a customer's browser?

In the era of HTML4 in the browser-side storage point site personalization data, especially the user's browser traces, the user's relevant data and so on generally can only be stored in the cookie, but most of the browser restrictions on the cookie is also forcing the site storage data as concise as possible, to store complex, Relationship-based user data is simply not possible. But into the HTML5 era, all this is not called the matter ...

First, the background of local storage origin

It is well known that the Html4 age cookie size, format, storage data format and other restrictions, Web application if you want to store users in the browser part of the information, then only with the help of cookies. But these limitations of cookies also lead to the fact that cookies can store simple data such as identifiers such as IDs, and complex data is even more ridiculous.

The following are restrictions on cookies:

1. 1, most browsers support a maximum of 4096 bytes of cookies.
2. 2, the browser also restricts the number of cookies that the site can store on the user's computer. Most browsers allow only 20 cookies per site, and if you try to store more cookies, the oldest cookie is discarded.
3. 3, some browsers also impose an absolute limit on the total number of cookies they will accept from all sites, typically 300.
4. 4, cookies are sent to the backend server with HTTP requests by default, but not all requests require cookies, such as JS, CSS, images, etc.

HTML5 's designers were ready for HTML5 to become a rich client. In order to solve a series of limitations of the cookie, HTML5 through JS's new API can directly store a large number of data to the client browser, and support complex local database, so JS is the inverse of the day. HTML5 supports two types of webstorage, one is persistent local storage (localstorage), and the other is session-level local storage (sessionstorage).

Second, session-level local storage: sessionstorage

Added a JS object in HTML5: Sessionstorage; This object allows you to manipulate the session-level webstorage stored in the browser directly. The data stored in Sessionstorage is first in the form of Key-value, and it is related to the browser's current session, and when the session ends, the data is automatically purged, similar to a cookie that does not have an expiration time set.

Sessionstorage provides four ways to assist us in the operation of local storage.

• (1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say.
• (2) GetItem (key): Gets the corresponding value by key.
• (3) RemoveItem (key): Delete local data via key.
• (4) Clear (): Clears the data.

    <script type="text/javascript">        //添加key-value 数据到 sessionStorage        sessionStorage.setItem("demokey", "http://blog.itjeek.com");        //通过key来获取value        var dt = sessionStorage.getItem("demokey");        alert(dt);        //清空所有的key-value数据。        //sessionStorage.clear();        alert(sessionStorage.length);    </script>

For JS to learn and debug must have Chrome debugging tools to assist in order to do more. Of course, chrome is also my favorite web development aids, very simple F12 shortcut keys immediately open the tool, including IE is also this shortcut key. You can view the Sessionstorage data in the current browser.

See Demo Demo Online

Third, permanent local storage: localstorage

The Localstorage object is added to the latest JS API to allow users to store data from permanently stored web-side. And the data is not sent to the backend server with the HTTP request, and the size of the stored data is not considered, Because the HTML5 standard requires the browser to support at least 4MB. This is a completely disruptive cookie limitation and provides very handy technical support for Web applications to store complex user trace data locally. Then the next one to introduce the localstorage of the common methods, of course, basically with the sessionstorage is consistent.

Localstorage provides four ways to assist us in the operation of local storage.

• (1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say.
• (2) GetItem (key): Gets the corresponding value by key.
• (3) RemoveItem (key): Delete local data via key.
• (4) Clear (): Clears the data.

                                <script type="text/javascript">        //添加key-value 数据到 sessionStorage        localStorage.setItem("demokey", "http://blog.itjeek.com");        //通过key来获取value        var dt = localStorage.getItem("demokey");        alert(dt);        //清空所有的key-value数据。        //localStorage.clear();        alert(localStorage.length);    </script>            

Demo Demo Online

Four, inverse days of the local database

While HTML5 has provided powerful localstorage and Sessionstorage, both of them can only provide data that stores simple, data structures, and are powerless to do with complex web applications. The inverse of the day is HTML5 provides a browser-side database support, allowing us to directly through the JS API on the browser to create a local database, and support standard SQL CRUD operations, so that offline Web applications more convenient storage of structured data. Next, we introduce the relevant APIs and usage of local data.

The most basic steps for manipulating the local database are:

• First step: OpenDatabase method: Create an object that accesses the database.
• Step two: Use the database Access object created in the first step to execute the transaction method, which allows you to set up an event response method that turns on a successful transaction and can execute SQL in the event response method.
• The third step: Execute the query through the ExecuteSQL method, of course, the query can be: CRUD.

Next, we introduce the parameters and usage of the relevant methods.

(1) OpenDatabase method:

                    //Demo：获取或者创建一个数据库，如果数据库不存在那么创建之var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });

The OpenDatabase method opens a database that already exists, and if the database does not exist, it can also create a database. Several parameter meanings are:

• 1, database name.
• 2, the database version number, at present to pass a 1.0 on it, of course, can not fill;
• 3, the description of the database.
• 4, set the size of the allocated database (in kilobytes).
• 5, the callback function (can be omitted).
The database is created at the first call, and then the connection is established.

(2) The Db.transaction method can set a callback function that can accept a parameter that is the object of the transaction that we opened. This object can then be used to execute SQL scripts, which can be combined with the following steps.

(3) Execute the query through the ExecuteSQL method.

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

Parameter description:

• Qlquery: The SQL statement that needs to be executed, can be create, select, Update, delete;
• Value1,value2..] : An array of all the parameters used in the SQL statement, in the ExecuteSQL method, use the arguments in the s> statement first with "?" Instead, and then put the arguments into the second argument in turn
• Atahandler: Execution success is called the callback function, through which the query result set can be obtained;
• 4,errorhandler: callback function to invoke when execution fails;

Here is a comprehensive example that you can look at:

Effect of execution

Demo Demo Online

Permanent address of this article: better viewing effect and experience!

HTML5 Learning Series (vi) HTML5 local storage and local database