HTML5 local Storage and local database

Source: Internet
Author: User
Tags sessionstorage

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 to force the site to store data as concise as possible, to store complex, Relational user data is out of the question. But into the HTML5 era, these become no longer a problem ...

The following are restrictions on cookies:

1. Most browsers support a maximum of 4096 bytes of cookies.

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. Some browsers also impose an absolute limit on the total number of cookies they will accept from all sites, typically 300.

4.Cookie By default will be sent to the background server with the HTTP request, but not all requests require cookies, such as: JS, CSS, pictures and other requests do not need cookies.

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 to the HTML5: Sessionstorage This object allows you to manipulate the session-level webstorage stored in the browser directly. The data stored in the Sessionstorage is first in the form of Key-value, and it is related to the current session of the browser, and when the session ends, the data is automatically purged, similar to a cookie that is not set to expire.

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

(1) SetItem (key,value): Add local storage data.

(2) GetItem (key): Gets the corresponding value by key.

(3) RemoveItem (key): Delete local data via key.

(4) Clear (): Clears the data.

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 HTTP requests, and the size of the stored data is almost free of consideration. Because the HTML5 standard requires the browser to support at least 4MB. This is a completely disruptive cookie limitation, providing easy technical support for Web applications to store complex user trace data locally. The common method of localstorage is basically consistent with sessionstorage.

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

(1) SetItem (key,value): Add local storage data.

(2) GetItem (key): Gets the corresponding value by key.

(3) RemoveItem (key): Delete local data via key.

(4) Clear (): Clears the data.

Iv. Local Database

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.

Detailed reference: http://www.cnblogs.com/fly_dragon/p/3946012.html;

HTML5 local Storage and local database

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.