1.0 HTML5的本地存儲(chǔ)

• WebStorage本地存儲(chǔ)
  1. SessionStorage：將數(shù)據(jù)保存在 Session中，在瀏覽器關(guān)閉時(shí)進(jìn)行銷(xiāo)毀
  2. localStorage：將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，
• WebStorage特性：
  • 生命周期：localstorage 的生命周期是永久的，除非刪除數(shù)據(jù)，另一個(gè)sessionstorage的生命周期僅在會(huì)話頁(yè)面下有小
  • 存儲(chǔ)大?。?localStorage 和 sessionStorage 的存儲(chǔ)數(shù)據(jù)一般大小都是 5MB
  • 存儲(chǔ)位置：localstorage 和 sessionStorage 都保存在客戶端，不與服務(wù)器進(jìn)行交互通信
  • 存儲(chǔ)內(nèi)容類(lèi)型：localStorage 和 sessionStorage 只能存儲(chǔ) 字符類(lèi)型對(duì)于復(fù)雜的對(duì)象，使用 JSON對(duì)象中的 stringify 和 parse 來(lái)處理
  • 獲取方式：localStorage 長(zhǎng)用于長(zhǎng)期登錄（判斷用戶是否登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)；sessionStorage 在應(yīng)用時(shí)需要被刺輸入密碼才可登錄。
  • 用法
    1. setItem (key, value)：保存數(shù)據(jù)，以鍵值對(duì)傳入，即可獲取對(duì)應(yīng)的value值
    2. getItem (key)：獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對(duì)應(yīng)的value值
    3. removeItem( key) ：刪除單個(gè)數(shù)據(jù)，根據(jù)鍵值移除對(duì)應(yīng)的信息。
    4. clear ()：刪除所有的數(shù)據(jù)
    5. key ( index) ：獲取某個(gè)索引的key

2.0 Web SQL 數(shù)據(jù)庫(kù)

2.1 核心用法

規(guī)范中定義的3個(gè)核心用法：

• openDatabase：使用現(xiàn)有的數(shù)據(jù)庫(kù)或新建數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)對(duì)象
• transaction：能夠控制一個(gè)事物，以及基于這種情況來(lái)執(zhí)行提交或者回滾
• executeSQL：用于執(zhí)行SQL查詢(xún)

2.2 打開(kāi)數(shù)據(jù)庫(kù)

openDatabase() 方法用來(lái)打開(kāi)已存在的數(shù)據(jù)庫(kù)，如果不存在則會(huì)創(chuàng)建一個(gè)新的數(shù)據(jù)庫(kù)

方法對(duì)應(yīng)的5個(gè)參數(shù)：數(shù)據(jù)庫(kù)名稱(chēng)，版本號(hào)，文本描述，數(shù)據(jù)庫(kù)大小，創(chuàng)建回調(diào)（會(huì)在數(shù)據(jù)庫(kù)創(chuàng)建后被調(diào)用）

<script>
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
</script>

2.3 執(zhí)行創(chuàng)建表

創(chuàng)建表操作使用 ：database.transaction() 函數(shù)，代碼如下：

<script>
    var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
    db.transaction(function(tx){
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id,unique,log)')
    })
    // 創(chuàng)建了一個(gè)名為 LOGS 表
</script>

2.4 插入數(shù)據(jù)

1. 插入數(shù)據(jù)，代碼如下：

   <script>
       var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
    db.transaction(function(tx){
           // 創(chuàng)建了一個(gè)名為 LOGS 表
           tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id,unique,log)')
           // 插入數(shù)據(jù)
           tx.executeSql('INSERT INTO LOGS(id,log) VALUES(1, '測(cè)試數(shù)據(jù)')')
           tx.executeSql('INSERT INTO LOGS(id, log) VALUES(2, 'www.baidu.com')')
           
           // 使用動(dòng)態(tài)值來(lái)插入
           // 'e_id'和'e_log'是外部變量，executeSql會(huì)映射數(shù)組參數(shù)中的每個(gè)條目給出的'?'所對(duì)應(yīng)的值
           tx.executeSql('INSERT INTO LOGS(id,log) VALUES(?, ?)',[e_id, e_log])
       })
    
   </script>
   

2.5 讀取數(shù)據(jù)

以下代碼演示讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)：

<script>
    var db = openDatabase('mydb', '1.0', 'Text DB', 2 * 1024 * 1024);
    db.transaction(function(tx){
        tx.executeSql('SELECT * FROM LOGS',[], function(tx,result){
            var len = result.rows.length;
            msg = "<P>查詢(xún)記錄條數(shù)：" + len + "</p>"
            document.querySelector('#status').innerHTML += msg;
            for(i = 0; i<len; i++){
                alert(result.rows.item(i).log)''
            }
        },null)
    })
</script>

2.6 刪除數(shù)據(jù)

刪除記錄代碼如下：

<script>
    db.transaction(function(tx){
        tx.executeSql('DELTER FROM LOGS WHERE id = 1');
    })
</script>

刪除指定id，動(dòng)態(tài)寫(xiě)法：

<script>
    db.transaction(function(ts){
        tx.executeSql('DELETE FROM LOGS Where id = ?',[id   ])
    })
</script>

2.7 更新數(shù)據(jù)

更新數(shù)據(jù)代碼如下：

<script>
    db.transaction(function(tx){
        tx.executeSql('UPDATE LOGS SET log = \' www.1.6.com\' WHERE id = 2')
    })
    
</script>

修改指定數(shù)據(jù)，動(dòng)態(tài)寫(xiě)法：

<script>
    db.transaction(function(tx){
        tx.executeSql('UPDATE LOGS SET log = \' www.1.6.com\' WHERE id = ?',[id])
    })
    
</script>