h5本地存儲資料庫

㈠ HTML5的5種存儲方式詳解

引言

本篇文章主要介紹了前端HTML5幾種存儲方式的總結 ，主要包括本地存儲localstorage，本地存儲sessionstorage，離線緩存（application cache），Web sql，IndexedDB。有興趣的可以了解一下。

正文開始~

h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。

主要應用：購物車、客戶登錄

對於IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。

目標

存儲方式：

以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。

大小：

每個域名5M

支持情況：

注意：IE9 localStorage不支持本地文件，需要將項目署到伺服器，才可以支持！

常用的API：

getItem //取記錄

setIten//設置記錄

removeItem//移除記錄

key//取key所對應的值

clear//清除記錄

存儲的內容：

數組，圖片，json，樣式，腳本。。。（只要是能序列化成字元串的內容都可以存儲）

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。

本地緩存應用所需的文件

使用方法：

①配置manifest文件

頁面上：

Manifest 文件：

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分為三個部分：

①CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存

②NETWORK - 在此標題下列出的文件需要與伺服器的連接，且不會被緩存

③FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

完整demo：

伺服器上： manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。

如Tomcat:

常用API：

核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：

0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存

1（IDLE） : 閑置，即應用緩存未得到更新

2 （CHECKING） : 檢查中，即正在下載描述文件並檢查更新

3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源

4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢

5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存

相關的事件：

表示應用緩存狀態的改變：

checking : 在瀏覽器為應用緩存查找更新時觸發

error : 在檢查更新或下載資源期間發送錯誤時觸發

noupdate : 在檢查描述文件發現文件無變化時觸發

downloading : 在開始下載應用緩存資源時觸發

progress：在文件下載應用緩存的過程中持續不斷地下載地觸發

updateready : 在頁面新的應用緩存下載完畢觸發

cached : 在應用緩存完整可用時觸發

Application Cache的三個優勢：

① 離線瀏覽

② 提升頁面載入速度

③ 降低伺服器壓力

注意事項：

1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）

2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存

3. 引用manifest的html必須與manifest文件同源，在同一個域下

4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。

6. FALLBACK中的資源必須和manifest文件同源

7. 更新完版本後，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。

8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問

9. 當manifest文件發生改變時，資源請求本身也會觸發更新

離線緩存與傳統瀏覽器緩存區別：

1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件

2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行

3. 離線緩存可以主動通知瀏覽器更新資源

關系資料庫，通過SQL語句訪問

Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。

支持情況：

Web SQL 資料庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法：

①openDatabase： 這個方法使用現有的資料庫或者新建的資料庫創建一個資料庫對象。

②transaction： 這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。

③executeSql： 這個方法用於執行實際的 SQL 查詢。

打開資料庫：

執行查詢操作：

插入數據：

讀取數據：

由這些操作可以看出，基本上都是用SQL語句進行資料庫的相關操作，如果你會MySQL的話，這個應該比較容易用。

索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。

非同步API：

在IndexedDB大部分操作並不是我們常用的調用方法，返回結果的模式，而是請求——響應的模式，比如打開資料庫的操作

這樣，我們打開資料庫的時候，實質上返回了一個DB對象，而這個對象就在result中。由上圖可以看出，除了result之外。還有幾個重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請求打開的資料庫的版本號和已經存在的資料庫版本號不一致的時候調用）。這就類似於我們的ajax請求那樣。我們發起了這個請求之後並不能確定它什麼時候才請求成功，所以需要在回調中處理一些邏輯。

關閉與刪除：

數據存儲：

indexedDB中沒有表的概念，而是objectStore，一個資料庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當於一張表，裡面存儲的每條數據和一個鍵相關聯。

我們可以使用每條記錄中的某個指定欄位作為鍵值（keyPath），也可以使用自動生成的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數據結構也有差異。

學習從來不是一個人的事情，要有個相互監督的夥伴，想要學習或交流前端問題的小夥伴可以私信「學習」小明獲取web前端入門資料，一起學習，一起成長！

㈡ 用html5本地資料庫Sqlite新建的本地資料庫保存在哪裡

如果用的Chrome瀏覽器
那麼SQLite資料庫就安裝到了$CHROME_HOME\User Data\Default\databases中
這個目錄中databases.db是當前用戶的所有創建的資料庫的配置，而file__0目錄則是資料庫表文件

其他瀏覽器也應該差不多

㈢ html5本地存儲更新資料庫sql 怎麼寫

HTML5本地存儲——Web SQL Database
在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數據結構很有用，但是對於大量結構化數據就無能為力了，靈活大不夠強大。
Web SQL Database
我們經常在資料庫中處理大量結構化數據，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端資料庫的 API，這些 API 是非同步的，規范中使用的方言是SQLlite，悲劇正是產生於此，Web SQL Database規范頁面有著這樣的聲明

This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
大概意思就是
這個文檔曾經在W3C推薦規范上，但規范工作已經停止了。目前已經陷入了一個僵局：目前的所有實現都是基於同一個SQL後端（SQLite），但是我們需要更多的獨立實現來完成標准化。
也就是說這是一個廢棄的標准了，雖然部分瀏覽器已經實現，但。。。。。。。
三個核心方法
但是我們學一下也沒什麼壞處，而且能和現在W3C力推的IndexedDB做比較，看看為什麼要廢棄這種方案。Web SQL Database 規范中定義的三個核心方法：
openDatabase：這個方法使用現有資料庫或新建資料庫來創建資料庫對象
transaction：這個方法允許我們根據情況控制事務提交或回滾
executeSql：這個方法用於執行SQL 查詢

openDatabase
我們可以使用這樣簡單的一條語句，創建或打開一個本地的資料庫對象
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五個參數：
資料庫名字
資料庫版本號
顯示名字
資料庫保存數據的大小（以位元組為單位 )
回調函數（非必須)

如果提供了回調函數，回調函數用以調用 changeVersion() 函數，不管給定什麼樣的版本號，回調函數將把資料庫的版本號設置為空。如果沒有提供回調函數，則以給定的版本號創建資料庫。
transaction
transaction方法用以處理事務，當一條語句執行失敗的時候，整個事務回滾。方法有三個參數
包含事務內容的一個方法
執行成功回調函數（可選）
執行失敗回調函數（可選）

db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});

這個例子中我們創建了一個table，並在表中插入三條數據，四條執行語句任何一條出現錯誤，整個事務都會回滾
executeSql
executeSql方法用以執行SQL語句，返回結果，方法有四個參數
查詢字元串
用以替換查詢字元串中問號的參數
執行成功回調函數（可選）
執行失敗回調函數（可選）

在上面的例子中我們使用了插入語句，看個查詢的例子

db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});

完整示例

<!DOCTYPE HTML>
<html>
<head>
<title>Web SQL Database</title>
</head>
<body>
<script type="text/javascript">
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});

db.transaction(function (context) {
context.executeSql('SELECT * FROM testTable', [], function (context, results) {
var len = results.rows.length, i;
console.log('Got '+len+' rows.');
for (i = 0; i < len; i++){
console.log('id: '+results.rows.item(i).id);
console.log('name: '+results.rows.item(i).name);
}
});
});
</script>
</body>
</html>

最後
由於Web SQL Database規范已經被廢棄，原因說的很清楚，當前的SQL規范採用SQLite的SQL方言，而作為一個標准，這是不可接受的，每個瀏覽器都有自己的實現這還搞毛的標准。這樣瀏覽器兼容性就不重要了，估計慢慢會被遺忘。不過Chrome的控制台真心好用啊，神馬cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增內容看的一清二楚，免去了很多調試代碼工作。

㈣ html5,什麼是本地存儲什麼是websql資料庫存儲

HTML5 ：

將成為HTML、XHTML以及HTMLDOM的新標准。
HTML的上一個版本誕生於1999年。自從那以後，Web世界已經經歷了巨變。
HTML5仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。

本地存儲：

儲存在用戶本地終端上的數據，多數使用cookie
Cookie技術誕生以來，它就成了廣大網路用戶和Web開發人員爭論的一個焦點。有一些網路用戶，甚至包括一些資深的Web專家也對它的產生和推廣感到不滿，這並不是因為Cookie技術的功能太弱或其他技術性能上的原因，而是因為Cookie的使用對網路用戶的隱私構成了危害。因為Cookie是由Web伺服器保存在用戶瀏覽器上的小文本文件，它包含有關用戶的信息[2]。

websql資料庫存儲：

使用資料庫進行數據存儲，現在流行的資料庫有：
1、Access一般用在小網站上，類似企業站，功能比較簡單，對數據要求不高；
2、Mssql是一個比較大的完善的資料庫，在windows上常用,配NETASP等程序。
3、Mysql是一個小型的公開源代碼的免費資料庫，在windows，linux上都常用，和PHP程序組成一對完美搭檔。

㈤ app掃碼打開h5鏈接如何獲取app本地存儲數據

導入。
如果想要提取app用戶數據，首先我們需要做的就是全方位的優化渠道，通過項目關的第三方統計平台，直接將統計的數據進行優化，數據經過整理和分析之後，會不會大致的了解到相應的優化渠道，這樣就可以比較輕松的評估出個渠道的優劣，優先選擇那些優質渠道。

㈥ html5怎麼連接資料庫

在HTML5之前的時代，如果需要在客戶端本地保存數據，只能存儲在Cookie中，但是 Cookie使用過多會影響請求速度 ，所以並不適合存儲大量數據。

而在HTML5面世後，自帶了本地存儲和本地資料庫功能，更為便捷的管理客戶端數據。

HTML5提供了一個 基於瀏覽器端的資料庫 （WebSQL 、IndexedDB），我們可以通過JS API來在瀏覽器端創建一個本地資料庫，而且它還支持標準的SQL來執行CRUD操作。

如何查看本地的資料庫呢？通過各個 瀏覽器的調試工具 可以查看。

在HTML5中操作本地資料庫都是通過JS API來實現的，很簡單，步聚如下：

1、通過 openDatabase 創建資料庫對象

2、通過 db.transaction 設置回調函數

3、通過 executeSql 方法執行查詢

HTML5默認情況下是無法連接遠程資料庫的，一般都是通過API去操作資料庫。比如當下流行的前後端完全分離，藉助的就是RESTful來實現業務數據的CRUD操作。

怎麼會問這個問題，HTML是不可能鏈接資料庫的，他是標簽類語言，是用於構建靜態頁面的，要想鏈接資料庫必須得支持網路通信和IO的，顯然HTML並沒有支持，HTML只是用來設計頁面的。

我還以為我落伍了，h5連資料庫

㈦ 自媒體里h5指的是什麼

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。

H5這個詞,來自」HTML5」,所謂「HTML5」,是指「HTML"的第5個版本，而"HTML」,則是指描述網頁的標准語言。

幾乎所有在線的應用類網站,本質上都是一個"H5」。H5頁面簡單的說就是利用html5製作出來的頁面,利用圖片、文字、動畫、音樂等方式融合在一起來表達某種藝術效果或者推廣效果。

(7)h5本地存儲資料庫擴展閱讀

新特性

HTML5將Web帶入一個成熟的應用平台，在這個平台上，視頻、音頻、圖像、動畫以及與設備的交互都進行了規范。

1、智能表單

表單是實現用戶與頁面後台交互主要組成部分，HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式。

再加上新增加的一些表單標簽，使得原本需要JavaScript來實現的控制項，可以直接使用HTML5的表單來實現；一些如內容提示、焦點處理、數據驗證等功能，也可以通過THML5的智能表單屬性標簽來完成。

2、繪圖畫布

HTML5的canvas元索可以實現畫布功能，該元索通過自帶的API結合使用JavaScript腳本語言在網頁上繪制圖形和處理，擁有實現繪制線條、弧線以及矩形，用樣式和顏色填充區域，書寫樣式化文本，以及添加圖像的方法，且使用JavaScript可以控制其每一個像素。

HTML5的canvas元索使得瀏覽器無需Flash或Silverlight等插件就能直接顯示圖形或動畫圖像。

3、多媒體

HTML5最大特色之一就是支持音頻視頻，在通過增加了<audio>、<video>兩個標簽來實現對多媒體中的音頻、視頻使用的支持，只要在Web網頁中嵌入這兩個標簽，而無需第三方插件（如Flash）就可以實現音視頻的播放功能。

HTML5對音頻、視頻文件的支持使得瀏覽器擺脫了對插件的依賴，加快了頁面的載入速度，擴展了互聯網多媒體技術的發展空間。

4、地理定位

現今移動網路備受青睞，用戶對實時定位的應用越來，要求也越來越高。HTML5通過引入Geolocation的API可以通過GPS或網路信息實現用戶的定位功能，定位更加准確、靈活。

通過HTML5進行定位，除了可以定位自己的位置，還可以在他人對你開放信息的情況下獲得他人的定位信息。

5、數據存儲

HTML5較之傳統的數據存儲有自已的存儲方式，允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求，HTML5支持DOMStorage和WebSQLDatabase兩種存儲機制。

其中，DOMStorage適用於具有key/value對的基本本地存儲；而WebSQLDatabase是適用於關系型資料庫的存儲方式，開發者可以使用SQL語法對這些數據進行查詢、插入等操作。

6、多線程

HTML5利用WebWorker將Web應用程序從原來的單線程業界中解放出來，通過創建一個WebWorker對象就可以實現多線程操作。JavaScript創建的Web程序處理事務都是在單線程中執行，響應時間較長，而當JavaScript過於復雜時，還有可能出現死鎖的局面。

HTML5新增加了一個WebWorkerAPI，用戶可以創建多個在後台的線程，將耗費較長時間的處理交給後檯面不影響用戶界面和響應速度，這些處理不會因用戶交互而運行中斷。使用後台線程不能訪問頁面和窗口對象，但後台線程可以和貞面之間進行數據交互。

㈧ H5的web本地存儲如何使用

localStorage.getItem(key) 獲取鍵值key對應的值
localStorage.setItem(key, value) 添加數據，鍵值為key，值為value

㈨ html5 本地存儲有多少種方案

html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2、Cookie
這種存儲方式存儲內容很有限，只適合做簡單信息存儲，存取介面設計得極其反人類，舉例如下：
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3、Indexed Database API
IndexedDB可以存儲結構對象，可構建key和index的索引方式查找，目前各瀏覽器的已經逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作介面類似NodeJS的非同步回調方式，特別是查詢時連cursor的continue都是非同步再次回調onsuccess函數的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4、FileSystem API
FileSystem API相當於操作本地文件的存儲方式，目前支持瀏覽器不多，其介面標准也在發展制定變化中，因此也可以動態生成圖片到本地文件，然後通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5、Application Cache
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用於查看緩存的當前狀態：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};