html5,什么是本地存儲?什么是websql數(shù)據(jù)庫存儲

HTML5本地存儲——Web SQL Database

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，小程序制作，10年建站對成都LED顯示屏等多個領(lǐng)域，擁有豐富的網(wǎng)站營銷經(jīng)驗。

在HTML5 WebStorage介紹了html5本地存儲的Local Storage和Session Storage，這兩個是以鍵值對存儲的解決方案，存儲少量數(shù)據(jù)結(jié)構(gòu)很有用，但是對于大量結(jié)構(gòu)化數(shù)據(jù)就無能為力了，靈活大不夠強(qiáng)大。

Web SQL Database

我們經(jīng)常在數(shù)據(jù)庫中處理大量結(jié)構(gòu)化數(shù)據(jù)，html5引入Web SQL Database概念，它使用 SQL 來操縱客戶端數(shù)據(jù)庫的 API，這些 API 是異步的，規(guī)范中使用的方言是SQLlite，你假如感興趣，可以來我的裙，一起學(xué)習(xí)交流下，同時也歡迎每一位大神，前面是二五七，中間是014，后面是001，組合起來就是了，非常歡迎真心久留學(xué)習(xí)的。

三個核心方法

但是我們學(xué)一下也沒什么壞處，而且能和現(xiàn)在W3C力推的IndexedDB做比較，看看為什么要廢棄這種方案。Web SQL Database 規(guī)范中定義的三個核心方法：

openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象

transaction：這個方法允許我們根據(jù)情況控制事務(wù)提交或回滾

executeSql：這個方法用于執(zhí)行SQL 查詢

html5本地存儲怎么做，html5本地存儲實例詳解

html5本地存儲實例詳解之創(chuàng)建

1

首先我們新建一個html5的空白文檔，小編這里演示用的是Dreamweaver CS6，當(dāng)然其他文本編輯器也可以。

2

保存之后開始構(gòu)建html，我們這里示例用一個文本框兩個按鈕和一個顯示數(shù)據(jù)的div，如下圖：

3

之后寫js事件，當(dāng)點擊“保存”的時候，把文本框的內(nèi)容保存到sessionStorage中，當(dāng)點擊“顯示”的時候，把保存的數(shù)據(jù)從sessionStorage中讀取出來顯示在頁面上。

4

完整代碼如下，我們可以在瀏覽器預(yù)覽，然后點擊試試效果，可以發(fā)現(xiàn)能夠存儲和顯示。

5

按F12打開控制臺，找到sessionStorage，會發(fā)現(xiàn)其是用鍵值對的方式存儲數(shù)據(jù)的。

6

localStorage跟sessionStorage類似，只是localStorage只要不刪除就會永久存儲在電腦上，而sessionStorage只要關(guān)閉了頁面就沒有了，這里小編就不再演示了。

END

html5本地存儲實例詳解之刪除

html5本地存儲的刪除其實也很簡單，也是打開控制臺找到相應(yīng)的存儲信息，在上面右擊刪除即可。

點擊刪除之后需要刷新一次頁面就會看到本地存儲的數(shù)據(jù)已經(jīng)刪除了。

3

如果用代碼的話，就是.removeItem(key)這個了。

html5 本地存儲有多少種方案

html5 本地存儲有五種方案。

1、LocalStorage

LocalStorage就是Key-Value的簡單鍵值對存儲結(jié)構(gòu)，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

這種存儲方式存儲內(nèi)容很有限，只適合做簡單信息存儲，存取接口設(shè)計得極其反人類，舉例如下：

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可以存儲結(jié)構(gòu)對象，可構(gòu)建key和index的索引方式查找，目前各瀏覽器的已經(jīng)逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作接口類似NodeJS的異步回調(diào)方式，特別是查詢時連cursor的continue都是異步再次回調(diào)onsuccess函數(shù)的操作方式，因此和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相當(dāng)于操作本地文件的存儲方式，目前支持瀏覽器不多，其接口標(biāo)準(zhǔn)也在發(fā)展制定變化中，因此也可以動態(tài)生成圖片到本地文件，然后通過 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 對象是對瀏覽器的應(yīng)用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當(dāng)前狀態(tài)：

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;

};

HTML5本地存儲機(jī)制是怎樣的？

HTML5 是下一代 HTML 標(biāo)準(zhǔn)，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機(jī)制提供了一種方式讓程序員能夠把信息存儲到本地的計算機(jī)上，在需要時獲取。這點和 cookie 相似，區(qū)別是 DOM Storage 提供了更大容量的存儲空間。

目前，在客戶端保存數(shù)據(jù)使用最多的是 cookie，但 cookie 的大小上限為 4KB，并且每次請求一個新頁面時 cookie 都會被發(fā)送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash。現(xiàn)在，HTML5 提供了一種標(biāo)準(zhǔn)的接口，使程序員可以簡單地訪問存儲的數(shù)據(jù)。由于鍵值對存儲在本地計算機(jī)上，在頁面加載完畢后可以通過 JavaScript 來操作這些數(shù)據(jù)。

HTML5 的建議是每個網(wǎng)站提供給 Storage 的空間是 5MB，一般來說足夠存字符串。如果存入的數(shù)據(jù)太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。

安全性

一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應(yīng)該在完成數(shù)據(jù)存儲后使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數(shù)據(jù)。

存儲事件驅(qū)動

如果想在存儲成功或修改存儲的值時執(zhí)行一些操作，可以用 DOM Storage 接口提供的事件。

html5 打開本地文件夾

在HTML5里，從Web網(wǎng)頁上訪問本地文件系統(tǒng)變的十分的簡單，那就是使用File API。這個File規(guī)范說明里提供了一個API來表現(xiàn)Web應(yīng)用里的文件對象，你可以通過編程來選擇它們，訪問它們的信息。這個File API包括：

一個FileList序列，代表著由本地系統(tǒng)里選中的單個的文件組成的數(shù)組。用來選擇文件的用戶接口可以通過input type=”file”調(diào)用實現(xiàn)。

一個Blob接口，它代表原始二進(jìn)制數(shù)據(jù)，通過Blob對象你可以訪問里面的字節(jié)數(shù)據(jù)。

一個File接口，它里面存有文件的只讀屬性信息，像文件名，文件類型，文件數(shù)據(jù)訪問的地址。

一個FileReader接口，它提供了讀取一個文件的方法，和一個獲取文件讀取結(jié)果的事件模型。

一個FileError接口和一個FileException對象，它們用來定義這個規(guī)范中的錯誤產(chǎn)生條件。

如何使用這個例子：在這個例子中，我給出了一個畫板，你可以從本地文件系統(tǒng)里拖拽進(jìn)去一個圖片，或者你也可以用文件選擇框來選擇圖片。例子中，請只選擇圖片文件，我并沒有添加文件過濾和文件類型檢查。請記住，沒有一個瀏覽器完全實現(xiàn)了HTML5，這個例子需要在支持HTML5的瀏覽器上運行，比如Firefox3.5以上。?

實現(xiàn)File API的主要方法非常的簡單，就像下面：

function?imagesSelected(myFiles)?{?

for?(var?i?=?0,?f;?f?=?myFiles[i];?i++)?{?

var?imageReader?=?new?FileReader();?

imageReader.onload?=?(function(aFile)?{?

return?function(e)?{?

var?span?=?document.createElement(‘span‘);?

span.innerHTML?=?['img?class="images"?src="',?e.target.result,'"?title="',?aFile.name,?'"/'].join(”);?

document.getElementById(‘thumbs’).insertBefore(span,?null);?

};?

})(f);?

imageReader.readAsDataURL(f);?

}?

}?

function?dropIt(e)?{?

imagesSelected(e.dataTransfer.files);?

e.stopPropagation();?

e.preventDefault();?

}

選擇在td上放置ondrop事件：

td?align=”left”?height=”105″?ondragenter=”return?false”?ondragover=”return?false”?ondrop=”dropIt(event)”?

output?id=”thumbs”/output?

/td

當(dāng)前文章：html5本地,html5本地存儲的概念
分享URL：http://chinadenli.net/article48/dsgochp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、Google、App開發(fā)

廣告

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