這篇文章主要講解了“HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“HTML5的存儲(chǔ)功能和網(wǎng)絡(luò)SQL怎么操作”吧！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了猇亭免費(fèi)建站歡迎大家使用！
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跟蹤用戶購(gòu)買(mǎi)的機(jī)票，當(dāng)用戶在窗口中點(diǎn)擊頁(yè)面時(shí)，從一個(gè)窗口到另一個(gè)時(shí)當(dāng)前已經(jīng)購(gòu)買(mǎi)的機(jī)票會(huì)“泄漏”，這可能導(dǎo)致用戶購(gòu)買(mǎi)同一航班的兩張機(jī)票而沒(méi)有注意。
HTML5會(huì)話存儲(chǔ)屬性，此網(wǎng)站可以將數(shù)據(jù)添加到會(huì)話存儲(chǔ)中，用戶仍然可以在打開(kāi)的持有該會(huì)話的窗口中訪問(wèn)同一站點(diǎn)的任意頁(yè)面，當(dāng)關(guān)閉窗口時(shí)，會(huì)話也會(huì)丟失。
下面的代碼將會(huì)設(shè)置一個(gè)會(huì)話變量，然后訪問(wèn)該變量：
XML / HTML代碼將內(nèi)容復(fù)制到文本
<！DOCTYPE HTML >
< html >
<身體>
<腳本類(lèi)型= “ text / javascript” >
if（sessionStorage.hits）{
sessionStorage.hits = 數(shù)字（sessionStorage.hits）+1;
}其他{
sessionStorage.hits = 1 ;
}
document.write（“總點(diǎn)擊數(shù)：” + sessionStorage.hits）;
< p >刷新頁(yè)面以增加點(diǎn)擊數(shù)。
< p >關(guān)閉窗口，然后再次打開(kāi)并檢查結(jié)果。
本地是
_出于性能原因，Web應(yīng)用程序可能希望在客戶端存儲(chǔ)百萬(wàn)字節(jié)的用戶數(shù)據(jù)，例如用戶撰寫(xiě)的整個(gè)文檔或者是用戶的郵箱。
Cookies并不能很好的處理這種情況，因?yàn)槊總€(gè)請(qǐng)求都會(huì)傳輸。
示例
HTML5發(fā)布了localStorage屬性，可以用于訪問(wèn)頁(yè)面的本地存儲(chǔ)區(qū)域而沒(méi)有時(shí)間限制，無(wú)論何時(shí)我們使用這個(gè)頁(yè)面的時(shí)候本地存儲(chǔ)都是可用的。
下面的代碼設(shè)置了一個(gè)本地存儲(chǔ)變量，每次訪問(wèn)該頁(yè)面時(shí)都可以訪問(wèn)該變量，甚至是下次打開(kāi)窗口時(shí)：
XML / HTML代碼將內(nèi)容復(fù)制到文本
<！DOCTYPE HTML >
< html >
<身體>
<腳本類(lèi)型= “ text / javascript” >
if（localStorage.hits）{
localStorage.hits = 數(shù)字（localStorage.hits）+1;
}其他{
localStorage.hits = 1 ;
}
document.write（“總點(diǎn)擊數(shù)：” + localStorage.hits）;
< p >刷新頁(yè)面以增加點(diǎn)擊數(shù)。
< p >關(guān)閉窗口，然后再次打開(kāi)并檢查結(jié)果。
方便學(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 >
<身體>
<腳本類(lèi)型= “ 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 >刷新頁(yè)面不會(huì)增加點(diǎn)擊計(jì)數(shù)器。
< p >關(guān)閉窗口，然后再次打開(kāi)并檢查結(jié)果。
Web SQL數(shù)據(jù)庫(kù)
Web SQL數(shù)據(jù)庫(kù)API并不是HTML5規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，而是使用了SQL操作客戶端數(shù)據(jù)庫(kù)的API。核心方法下面是規(guī)范中定義的三個(gè)核心方法。也會(huì)涵蓋在本教程中：
的openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象的事務(wù)：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。的ExecuteSQL：這個(gè)方法用于執(zhí)行實(shí)際的SQL查詢。開(kāi)啟數(shù)據(jù)庫(kù)如果數(shù)據(jù)庫(kù)已經(jīng)存在，openDatabase方法負(fù)責(zé)開(kāi)啟數(shù)據(jù)庫(kù)，如果不存在，這個(gè)方法會(huì)創(chuàng)建它。
使用以下的代碼可以創(chuàng)建并開(kāi)啟一個(gè)數(shù)據(jù)庫(kù)：
JavaScript代碼將內(nèi)容復(fù)制到
var db = openDatabase（'mydb' ， '1.0' ， 'Test DB' ，2 * 1024 * 1024）;
上面的方法接受以下五個(gè)參數(shù)：
數(shù)據(jù)庫(kù)名稱版本號(hào)描述文本數(shù)據(jù)庫(kù)大小被創(chuàng)建的最后一個(gè)也是一個(gè)第五個(gè)參數(shù)，創(chuàng)建引用會(huì)在創(chuàng)建數(shù)據(jù)庫(kù)后被調(diào)用。然而，甚至沒(méi)有這個(gè)特性（功能），運(yùn)行時(shí)仍會(huì)創(chuàng)建數(shù)據(jù)庫(kù)以及正確的版本。
執(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）' ）;
}）;
上面的查詢語(yǔ)句會(huì)在'mydb'數(shù)據(jù)庫(kù)中創(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)存在的記錄，我們可以使用替換來(lái)捕獲結(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 = “
找到的行：” + len + “ ” ;
document.querySelector（'#status' ）.innerHTML + = msg;
對(duì)于 （i = 0; i 警報(bào)（results.rows.item（i）.log）; } }，為 null ）； }）; 最終示例最后，然我們把這個(gè)例子放到如下所示的完整HTML5文檔中，然后嘗試在Safari瀏覽器中運(yùn)行它： JavaScript代碼將內(nèi)容復(fù)制到 <！DOCTYPE HTML> <頭>
重慶分公司
重慶分公司