HTML 5 browser database
Why you use the browser database: With the enhanced processing capabilities of the browser, a growing number of double happiness Birds website to start thinking about the client to store large amounts of data, which can reduce the user to retrieve data from the server waiting time.
1. Local storage - local storage can store data for a long time and no time limit.
It can be stored: array, JSON data, images, scripts, style file
Copy the code
function test (). {
If (window .localstorage) // determine whether the browser supports localStorage
var LS = window. Local storage;
LSsetitem ( "name", "Zhang San"); // set value and a
var name = ls. getItem ( "name"); value
LSremoveitem ( "name"); // delete the data
} else {
Alert ( "browser does not support local stores");
}
}
copy the code
restrictions: storing data can not be shared between the sub-domain; exceeded the storage range by using LRU and FIFO processing techniques;
2. Session storage lifecycle is the current window or tab. Once the window or tab permanently closed, all data will be cleared by the session stored in the storage storage.
Index database
1. Use of the reasons indexeddb
Conventional browser data storage scheme is not suitable for storing large amounts of data: cookie does not exceed 4KB, each request will be sent back to the server; windows.name properties unsafe.
There is no uniform standard, local storage between 2.5MB to 10MB (different browsers). Therefore a need for a new solution, which is indexeddb background.
2. What is the index database
In general, indexeddb is a browser database can be created and operated by Web scripts. It allows to store large amounts of data, providing an interface to find, but also the index.
These are not stored locally. In terms of the type of database, indexeddb not a relational database (it does not support SQL queries), but closer to nosql database.
three. Characteristics index database.
(1) to store key-value pairs. indexeddb using object store to store data. All types of data can be stored directly, including javascript object. In the object repository,
Data is stored "on key" to. Each data has its corresponding keys. Key names are unique and can not be repeated, otherwise it will lead to error.
(2) asynchrony. indexeddb operation does not lock the browser, and synchronization of different local storage, users can still perform other operations. Asynchronous design purpose is to prevent read and write large amounts of data, reducing the performance of the page.
(3) support services. indexeddb support services, which means that in a series of steps, as long as a step fails, the entire transaction will be canceled. Return to the state of the database before the transaction occurs, and to rewrite only the portion where data exists.
(4) indexeddb also limited by the same domain, the domain name database for each database created. Pages of different domain names can only access the database under their own domain name, you can not access the database under other domain name.
(5) indexeddb storage space larger than the local store, generally not less than 250MB. IE storage capacity of 250MB, Chrome, and the percentage of remaining space Opera, Firefox and no capacity constraints.
(6) support for binary storage. indexeddb not only store strings, binary data may also be stored.
Currently, Chrome27 +, Firefox 21 +, Opera15 + and IE10 + support this API, but Safari does not support it.
4. use
a. determine whether the browser supports indexing database
View Code
B. Create / Open Database
View Code
c. Close the database
See Code
D. Operating data
Before performing any work on the new database, the transaction need to start a business. In the transaction, you need to specify the object store transaction span.
There are three modes transaction
read-only: Read-only, you can not modify the database data could be performed simultaneously
reading and writing: read and write, allows you to read and write
version changes: VerionChange
D1. adding data
View Code
D2. Button to get data
View Code
D3. Read collection
View Code
D4. update data
View Code
D5. delete data
View Code
D6. Empty data
View Code
Good writing caught my attention.