解析HTML5的存儲功能和web SQL的相關(guān)操作方法

由 金聰采編 分享時間：2017-09-05 加入收藏我要投稿點(diǎn)贊

HTML5引入了兩種機(jī)制，類似于HTTP的會話cookie，用于在客戶端存儲結(jié)構(gòu)化數(shù)據(jù)以及克服以下缺點(diǎn)。每個HTTP請求中都包含Cookie，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的Web應(yīng)用程序。每個HTTP請求中都包含Cookie，從......
以下是【金聰采編】分享的內(nèi)容全文：

HTML5 引入了兩種機(jī)制，類似于 HTTP 的會話 cookies，用于在客戶端存儲結(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ù)。
這兩種存儲方式是 session storage 和 local storage，它們將用于處理不同的情況。

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

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

示例

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>

本地存儲
_本地存儲_被設(shè)計用于跨多個窗口進(jìn)行存儲，并持續(xù)處在當(dāng)前會話上。尤其是，出于性能的原因 Web 應(yīng)用程序可能希望在客戶端存儲百萬字節(jié)的用戶數(shù)據(jù)，比如用戶撰寫的整個文檔或者是用戶的郵箱。

Cookies 并不能很好的處理這種情況，因?yàn)槊總€請求都會傳輸。

示例

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</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 Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
localStorage.clear();
// Reset number of hits.
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refreshing the page would not to increase hit counter.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>

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

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

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