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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了猇亭免費(fèi)建站歡迎大家使用！

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

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

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

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

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

會話存儲

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

示例

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

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

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

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)用程序可能希望在客戶端存儲百萬字節(jié)的用戶數(shù)據(jù)，例如用戶撰寫的整個文檔或者是用戶的郵箱。

Cookies并不能很好的處理這種情況，因為每個請求都會傳輸。

示例

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

下面的代碼設(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í)上述概念-請進(jìn)行在線練習(xí)。

刪除Web存儲

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

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

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

下面的代碼會完全清除本地存儲：

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 >刷新頁面不會增加點(diǎn)擊計數(shù)器。</ p >  

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

</ body >  

</ html >  

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

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

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

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

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

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

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

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

執(zhí)行查詢

執(zhí)行查詢需要使用database.transaction（）函數(shù)。這個函數(shù)需要一個參數(shù)，它是一個負(fù)責(zé)實際執(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）' ）;   

}）;  

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

插入操作

為了在表中創(chuàng)建合并，我們在上面的示例中加入簡單的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)建的時還可以傳遞如下所示的動態(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會映射數(shù)組參數(shù)中的每個對應(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;   

   對于 （i = 0; i <len; i ++）{   

      警報（results.rows.item（i）.log）;   

   }   

 }，為 null ）；   

}）;  

最終示例最后，然我們把這個例子放到如下所示的完整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;   

   對于 （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>  

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

復(fù)制代碼

代碼如下：

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

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

網(wǎng)站標(biāo)題：HTML5的存儲功能和網(wǎng)絡(luò)SQL怎么操作
網(wǎng)址分享：http://chinadenli.net/article0/jsiioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、Google、響應(yīng)式網(wǎng)站、做網(wǎng)站、微信公眾號、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)