HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作

這篇文章主要講解了“HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作”吧！

HTML5使用了HTTP機(jī)制的Cookie，用于在客戶端存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)以及克服以下缺點(diǎn)。

每個(gè)HTTP請(qǐng)求中都包含Cookies，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的Web應(yīng)用程序。

每個(gè)HTTP請(qǐng)求中都包含Cookies，從而導(dǎo)致發(fā)送未加密的數(shù)據(jù)到互聯(lián)網(wǎng)上。

Cookies只能存儲(chǔ)有限的4KB數(shù)據(jù)，不足以存儲(chǔ)所需的數(shù)據(jù)。這兩種存儲(chǔ)方式是會(huì)話存儲(chǔ)和本地存儲(chǔ)，它們將用于處理不同的情況。

幾乎所有最新版本的瀏覽器都支持HTML5存儲(chǔ)，包括IE瀏覽器。

會(huì)話存儲(chǔ)

_會(huì)話存儲(chǔ)_被設(shè)計(jì)為用戶使用單個(gè)事務(wù)的場(chǎng)景，但是同時(shí)可以在不同的窗口中執(zhí)行多個(gè)事務(wù)。

示例

如果，該網(wǎng)站使用cookie跟蹤用戶購買的機(jī)票，當(dāng)用戶在窗口中點(diǎn)擊頁面時(shí)，從一個(gè)窗口到另一個(gè)時(shí)當(dāng)前已經(jīng)購買的機(jī)票會(huì)“泄漏”，這可能導(dǎo)致用戶購買同一航班的兩張機(jī)票而沒有注意。

HTML5會(huì)話存儲(chǔ)屬性，此網(wǎng)站可以將數(shù)據(jù)添加到會(huì)話存儲(chǔ)中，用戶仍然可以在打開的持有該會(huì)話的窗口中訪問同一站點(diǎn)的任意頁面，當(dāng)關(guān)閉窗口時(shí)，會(huì)話也會(huì)丟失。

下面的代碼將會(huì)設(shè)置一個(gè)會(huì)話變量，然后訪問該變量：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE HTML >  

< html >  

<身體>  

  <腳本類型= “ text / javascript” >   

    if（sessionStorage.hits）{   

       sessionStorage.hits  = 數(shù)字（sessionStorage.hits）+1;   

    }其他{   

       sessionStorage.hits  =  1 ;   

    }   

    document.write（“總點(diǎn)擊數(shù)：” + sessionStorage.hits）;   

  </腳本>  

  < p >刷新頁面以增加點(diǎn)擊數(shù)。</ p >  

  < p >關(guān)閉窗口，然后再次打開并檢查結(jié)果。</ p >  

</ body >  

</ html >  

本地是

_出于性能原因，Web應(yīng)用程序可能希望在客戶端存儲(chǔ)百萬字節(jié)的用戶數(shù)據(jù)，例如用戶撰寫的整個(gè)文檔或者是用戶的郵箱。

Cookies并不能很好的處理這種情況，因?yàn)槊總€(gè)請(qǐng)求都會(huì)傳輸。

示例

HTML5發(fā)布了localStorage屬性，可以用于訪問頁面的本地存儲(chǔ)區(qū)域而沒有時(shí)間限制，無論何時(shí)我們使用這個(gè)頁面的時(shí)候本地存儲(chǔ)都是可用的。

下面的代碼設(shè)置了一個(gè)本地存儲(chǔ)變量，每次訪問該頁面時(shí)都可以訪問該變量，甚至是下次打開窗口時(shí)：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE HTML >  

< html >  

<身體>  

  <腳本類型= “ text / javascript” >   

    if（localStorage.hits）{   

       localStorage.hits  = 數(shù)字（localStorage.hits）+1;   

    }其他{   

       localStorage.hits  =  1 ;   

    }   

    document.write（“總點(diǎn)擊數(shù)：” + localStorage.hits）;   

  </腳本>  

  < p >刷新頁面以增加點(diǎn)擊數(shù)。</ p >  

  < p >關(guān)閉窗口，然后再次打開并檢查結(jié)果。</ p >  

</ body >  

</ html >  

方便學(xué)習(xí)上述概念-請(qǐng)進(jìn)行在線練習(xí)。

刪除Web存儲(chǔ)

在本地機(jī)器上存儲(chǔ)敏感數(shù)據(jù)可能是危險(xiǎn)的，可能會(huì)留下安全隱患。

_會(huì)話存儲(chǔ)數(shù)據(jù)_在會(huì)話終止之后將由瀏覽器立即刪除。

要清除本地存儲(chǔ)設(shè)置需要調(diào)用localStorage.remove（'key'）；這個(gè)'key'就是我們想要?jiǎng)h除的值對(duì)應(yīng)的鍵。如果想要清除所有設(shè)置，需要調(diào)用localStorage.clear（）方法。

下面的代碼會(huì)完全清除本地存儲(chǔ)：

XML / HTML代碼將內(nèi)容復(fù)制到文本

<！DOCTYPE HTML >  

< html >  

<身體>  

  <腳本類型= “ text / javascript” >   

    localStorage.clear（）;   

    //重置點(diǎn)擊數(shù)。   

    if（localStorage.hits）{   

       localStorage.hits  = 數(shù)字（localStorage.hits）+1;   

    }其他{   

       localStorage.hits  =  1 ;   

    }   

    document.write（“總點(diǎn)擊數(shù)：” + localStorage.hits）;   

  </腳本>  

  < p >刷新頁面不會(huì)增加點(diǎn)擊計(jì)數(shù)器。</ p >  

  < p >關(guān)閉窗口，然后再次打開并檢查結(jié)果。</ p >  

</ body >  

</ html >  

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

Web SQL數(shù)據(jù)庫API并不是HTML5規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，而是使用了SQL操作客戶端數(shù)據(jù)庫的API。核心方法下面是規(guī)范中定義的三個(gè)核心方法。也會(huì)涵蓋在本教程中：

的openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個(gè)數(shù)據(jù)庫對(duì)象的事務(wù)：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。的ExecuteSQL：這個(gè)方法用于執(zhí)行實(shí)際的SQL查詢。開啟數(shù)據(jù)庫如果數(shù)據(jù)庫已經(jīng)存在，openDatabase方法負(fù)責(zé)開啟數(shù)據(jù)庫，如果不存在，這個(gè)方法會(huì)創(chuàng)建它。

使用以下的代碼可以創(chuàng)建并開啟一個(gè)數(shù)據(jù)庫：

JavaScript代碼將內(nèi)容復(fù)制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;  

上面的方法接受以下五個(gè)參數(shù)：

數(shù)據(jù)庫名稱版本號(hào)描述文本數(shù)據(jù)庫大小被創(chuàng)建的最后一個(gè)也是一個(gè)第五個(gè)參數(shù)，創(chuàng)建引用會(huì)在創(chuàng)建數(shù)據(jù)庫后被調(diào)用。然而，甚至沒有這個(gè)特性（功能），運(yùn)行時(shí)仍會(huì)創(chuàng)建數(shù)據(jù)庫以及正確的版本。

執(zhí)行查詢

執(zhí)行查詢需要使用database.transaction（）函數(shù)。這個(gè)函數(shù)需要一個(gè)參數(shù)，它是一個(gè)負(fù)責(zé)實(shí)際執(zhí)行查詢的函數(shù)，如下所示：

JavaScript代碼將內(nèi)容復(fù)制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函數(shù) （tx）{     

   tx.executeSql（'如果不存在日志則創(chuàng)建表（id unique，log）' ）;   

}）;  

上面的查詢語句會(huì)在'mydb'數(shù)據(jù)庫中創(chuàng)建一個(gè)叫做的LOGS的表。

插入操作

為了在表中創(chuàng)建合并，我們?cè)谏厦娴氖纠屑尤牒?jiǎn)單的SQL查詢，如下所示：

JavaScript代碼將內(nèi)容復(fù)制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函數(shù) （tx）{   

   tx.executeSql（'如果不存在日志則創(chuàng)建表（id unique，log）' ）;   

   tx.executeSql（'將日志插入（ID，日志）值（1，“ foobar”）' ）;   

   tx.executeSql（'將日志插入（ID，日志）值（2，“ logmsg”）' ）;   

}）;  

創(chuàng)建的時(shí)還可以傳遞如下所示的動(dòng)態(tài)值：

JavaScript代碼將內(nèi)容復(fù)制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函數(shù) （tx）{     

  tx.executeSql（'如果不存在日志則創(chuàng)建表（id unique，log）' ）;   

  tx.executeSql（'將日志插入日志   

                        （id，log）值（？，？' ），[e_id，e_log];   

}）;  

這里的e_id和e_log是外部變量，executeSql會(huì)映射數(shù)組參數(shù)中的每個(gè)對(duì)應(yīng)給“？”。

讀取操作

要讀取已經(jīng)存在的記錄，我們可以使用替換來捕獲結(jié)果，如下所示：

JavaScript代碼將內(nèi)容復(fù)制到

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

db.transaction（函數(shù) （tx）{   

   tx.executeSql（'如果不存在日志則創(chuàng)建表（id unique，log）' ）;   

   tx.executeSql（'將日志插入（ID，日志）值（1，“ foobar”）' ）;   

   tx.executeSql（'將日志插入（ID，日志）值（2，“ logmsg”）' ）;   

}）;   

db.transaction（函數(shù) （tx）{   

   tx.executeSql（'SELECT * FROM LOGS' ，[]， 函數(shù) （tx，結(jié)果）{   

   var  len = results.rows.length，i;   

   msg =  “ <p>找到的行：”  + len +  “ </ p>” ;   

   document.querySelector（'#status' ）.innerHTML + = msg;   

   對(duì)于 （i = 0; i <len; i ++）{   

      警報(bào)（results.rows.item（i）.log）;   

   }   

 }，為 null ）；   

}）;  

最終示例最后，然我們把這個(gè)例子放到如下所示的完整HTML5文檔中，然后嘗試在Safari瀏覽器中運(yùn)行它：

JavaScript代碼將內(nèi)容復(fù)制到

<！DOCTYPE HTML>   

<html>   

<頭>   

<script type = “ text / javascript” >   

var  db = openDatabase（'mydb' ，  '1.0' ，  'Test DB' ，2 * 1024 * 1024）;   

var  msg;   

db.transaction（函數(shù) （tx）{   

  tx.executeSql（'如果不存在日志則創(chuàng)建表（id unique，log）' ）;   

  tx.executeSql（'將日志插入（ID，日志）值（1，“ foobar”）' ）;   

  tx.executeSql（'將日志插入（ID，日志）值（2，“ logmsg”）' ）;   

  msg =  '<p>已創(chuàng)建日志消息并插入行。</ p>' ;   

  document.querySelector（'#status' ）.innerHTML = msg;   

}）;   

db.transaction（函數(shù) （tx）{   

  tx.executeSql（'SELECT * FROM LOGS' ，[]， 函數(shù) （tx，結(jié)果）{   

   var  len = results.rows.length，i;   

   msg =  “ <p>找到的行：”  + len +  “ </ p>” ;   

   document.querySelector（'#status' ）.innerHTML + = msg;   

   對(duì)于 （i = 0; i <len; i ++）{   

     msg =  “ <p> <b>”  + results.rows.item（i）.log +  “ </ b> </ p>” ;   

     document.querySelector（'#status' ）.innerHTML + = msg;   

   }   

 }，為 null ）；   

}）;   

</ script>   

</ head>   

<身體>   

<div id = “狀態(tài)”  name = “狀態(tài)” >狀態(tài)消息</ div>   

</ body>   

</ html>  

在瀏覽器中這會(huì)生成如下所示結(jié)果：

復(fù)制代碼

代碼如下：

創(chuàng)建日志消息并插入行。</ p> <p>找到的行：2 </ p> <p> foobar </ p> <p> logmsg

感謝各位的閱讀，以上就是“HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！