html5跨浏览器追踪--记先知创新大会

  • SessionStorage

    Function:

    • .key = value
    • .setItem(key,value)
    • .getItem(key)
    • .removeItem(key)
    • .clear()

    For example:

    • sessionStorage.name = 'Sven';
    • sessionStorage.setItem('Name','Sven');
    • sessionStorage.getItem('Name'); ;
    • sessionStorage.removeItem('Name');
    • sessionStorage.clear();

    tips:

    • Clear data while close browser.
    • Cross-domain.
    • Save as string,so if setItem('count',1),getItem('count')+5 is not expectation 6 ,is '15'.
    • When change keys.value ,will trigger the (windows.onstorage),but the browsers support it is not perfect.

  • LocalStorage

    LocalStorage`s Function is same as SessionStorage`s.

    For example:

    • var person = {'name': 'rainman', 'age': 24};
    • localStorage.setItem("me", JSON.stringify(person));
    • JSON.parse(localStorage.getItem('me')).name;// 'rainman'

  • GlobalStorage (already aborted)


  • Database Storage

    For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//create database
var db = openDatabase("users", "1.0", "tablename", 1024 * 1024);
if(!db){
alert("Failed to connect to database.");
} else {
alert("connect to database 'K'.");
}

// create table
db.transaction( function(tx) {
tx.executeSql(
"CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",
[],
function(){ alert('create users table success'); },
function(tx, error){ alert('create users table error:' + error.message); }
);
});

// insert
db.transaction(function(tx) {
tx.executeSql(
"INSERT INTO users (id, name) values(?, ?)",
[Math.random(), 'space'],
function(){ alert('insert success'); },
function(tx, error){ alert('insert error: ' + error.message);}
);
});

// select
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);
}
);
});

// remove
db.transaction(function (tx) {
tx.executeSql('DROP TABLE users');
});