HTML5 local storage and local database

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

        In HTML4 era in midrange storage data point web site personalized browser, especially traces of the user's browser, the user generally only relevant data is stored in the Cookie, but most browsers for Cookie limitation is forced site data storage as concise as possible, to store complex, relational user data impossible. But into the HTML5 era, these will no longer be a problem. . .

         The following is a cookie restrictions:

    1. Most browsers support up to 4096 bytes of Cookie.

    2. The browser also limit the sites can be stored on a user's computer the number of Cookie. Most browsers only allows each site to store 20 Cookie; if you try to store more Cookie, the oldest Cookie will be discarded.

    3. Some browsers will make an absolute limit on the total number of Cookie from all sites will accept them, usually 300.

    4.Cookie default would send as http request to the backend server, but not all requests require Cookie, such as: js, css, pictures and other request is not required cookie.

 

HTML5 supports two of WebStorage, one is permanent local storage (localStorage), the other is a session-level local storage (sessionStorage).

Second, the session-level local storage: sessionStorage

  Increase in HTML5 a Js objects: sessionStorage; This object can be directly manipulated session-level WebStorage stored in the browser data stored in sessionStorage The first is the Key-Value form, and the other is its current session with the browser. related, when the session ends, the data is automatically cleared, with overdue Cookie settings similar.

 sessionStorage offers four ways to assist our local store to do related operations.

  (1) setItem (key, value): add a local data store.

  (2) getItem (key): to obtain the corresponding value through the key.

  (3) removeItem (key): Delete the local data by key.

  (4) clear (): Clears the data.

Third, permanent local storage: localStorage

  LocalStorage object is increased in the latest of JS API in order to store the Web side of the permanent storage of user data. And the data is not sent with Http request to the backend server, and the size of stored data almost without regard because of the requirement browser must support at least to 4MB in the HTML5 standard. Therefore, it is entirely subvert Cookie limit for the Web application provides a very convenient technical support in the local storage complex user trace data. localStorage common method is basically consistent with sessionStorage.

 localStorage provides four methods to assist us to do local storage related operations.

  (1) setItem (key, value): add a local data store.

  (2) getItem (key): to obtain the corresponding value through the key.

  (3) removeItem (key): Delete the local data by key.

  (4) clear (): Clears the data.

Fourth, the local database

The most basic steps local database are:

  The first step: openDatabase: Create object to access the database.

  Step 2: Use a database access object created in step method to perform the transaction, by this method can set up a successful business event on response method, you can execute SQL in incident response process.

  The third step: the query is executed by executeSql method, of course, the query may be: CRUD.

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

 

Published an original article · won praise 2 · views 10000 +

Guess you like

Origin blog.csdn.net/u011927449/article/details/104032226