Local Storage-webStorage, storage-webStorage

Local Storage-webStorage, storage-webStorage

WebStorage provides a way for websites to store information on your local computer and obtain it as needed. This concept is similar to cookie. The difference is that it is designed for larger storage capacity. The Cookie size is limited, and the cookie will be sent every time you request a new page. WebStorage is stored on your computer. After a website loads a page, it can use Javascript to obtain the data.

It can be divided into localStorage, sessionStorage, globalStorage, and Web SQL Database Storage.

 

LocalStorage:

Detection

!! Window. localStorage;

Common Methods

. Key = value

. SetItem (key, value)

. GetItem (key)

. RemoveItem (key)

. Clear ()

 

Description

 

Example

// Use it in combination with JSON. stringify
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem('me')).name);  // 'rainman'
/**
* JSON. stringify converts JSON data into strings
 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'
 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'
* JSON. parse: reverse parses JSON. stringify
 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"]
 */

Http://jsfiddle.net/955gvbn4/

 

 

SessionStorage:

Detection

!! Window. sessionStorage;

 

Common Methods

. Key = value

. SetItem (key, value)

. GetItem (key)

. RemoveItem (key)

. Clear ()

Description

Example

None

 

GlobalStorage:

Common Methods

• GlobalStorage ['developer .w.illa.org '] -- all subdomains under .w.illa.org can read and write through the namespace storage object.
• GlobalStorage ['mozilla. org '] -- all webpages under the mozilla.org domain name can read and write through the namespace storage object.
• GlobalStorage ['org '] -- all webpages under the. org domain name can read and write through this namespace storage object.
• GlobalStorage [''] -- any webpage under any domain name can read and write through this namespace storage object

 

Method Property

• SetItem (key, value) -- sets or resets the key value.
• GetItem (key) -- get the key value.
• RemoveItem (key) -- delete the key value.
• Set the key value: window. globalStorage ["planabc.net"]. key = value;
• Obtain the key value: value = window. globalStorage ["planabc.net"]. key;

 

Description

Example

None

 

Database Storage:

Application Environment

The use of sessionStorage and localStorage for simple data storage can be well completed, but in addition to processing trivial relational data, it is far less powerful. This is the application of the "Web SQL Database" API of HTML 5.

 

Common Methods

• Open Link

Var db = openDatabase ("ToDo", "0.1", "A lalert of to do items.", 200000); // open the link
If (! Db) {alert ("Failed to connect to database.");} // check whether the connection is successfully created.

The code above creates a database object db named ToDo with version number 0.1. The db also contains the description and approximate size values. If needed, the size can be changed, so there is no need to preassume how much space the user is allowed to use.

It cannot be assumed that the connection has been successfully established, even if it was successful for a user in the past. There are multiple reasons why a connection fails. Maybe the User Agent rejects your access for security reasons, maybe the device storage is limited. In the face of active and rapidly evolving potential user agents, it is unwise to make assumptions about users' machines, software and capabilities. For example, when a user uses a handheld device, the data they can freely dispose of may only contain a few megabytes.

 

• Execute Query

db.transaction( function(tx) { 
    tx.executeSql(
        "INSERT INTO ToDo (label, timestamp) values(?, ?)", 
        ['lebel', new Date().getTime()], 
Function (tx2, result) {alert ('success ');},
Function (tx2, error) {alert ('failed: '+ error. message );}
    ); 
}); 

 

• Example

// Create a database
Var db = openDatabase ("users", "1.0", "User table", 1024*1024 );
if(!db){
    alert("Failed to connect to database."); 
} else {
    alert("connect to database 'K'."); 
}
// Create a table
db.transaction( function(tx) { 
    tx.executeSql(
        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", 
        [], 
Function () {alert ('users table created successfully ');},
Function (tx, error) {alert ('failed to create users table: '+ error. message );}
    );
}); 
// Insert data
db.transaction(function(tx) { 
    tx.executeSql(
        "INSERT INTO users (id, name) values(?, ?)", 
        [Math.random(), 'space'], 
Function () {alert ('data inserted successfully ');},
Function (tx, error) {alert ('failed to insert data: '+ error. message );}
    ); 
}); 
// Query
db.transaction( function(tx) { 
    tx.executeSql(
        "SELECT * FROM users", [],  
         function(tx, result) {
            var rows = result.rows, length = rows.length, i=0;
            for(i; i < length; i++) { 
                alert(
                    'id=' + rows.item(i)['id'] + 
                    'name='+ rows.item(i)['name']
                ); 
            } 
        }, 
        function(tx, error){
            alert('Select Failed: ' + error.message);
        }
    ); 
}); 
// Delete a table
db.transaction(function (tx) {  
    tx.executeSql('DROP TABLE users'); 
});

Compatibility:

 

Reference: http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m4

 

Reprinted please noteWww.cnblogs.com/yoshirogu