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

HTML5本地存儲——Web SQL Database

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,鞏留企業(yè)網(wǎng)站建設,鞏留品牌網(wǎng)站建設,網(wǎng)站定制,鞏留網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,鞏留網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

Web SQL Database

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

三個核心方法

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

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

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

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

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

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

1

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

2

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

3

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

4

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

5

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

6

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

END

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

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

點擊刪除之后需要刷新一次頁面就會看到本地存儲的數(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)容很有限，只適合做簡單信息存儲，存取接口設計得極其反人類，舉例如下：

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相當于操作本地文件的存儲方式，目前支持瀏覽器不多，其接口標準也在發(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 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當前狀態(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本地存儲機制是怎樣的？

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

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

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

安全性

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

存儲事件驅(qū)動

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

本文標題：html5的本地存儲,html5本地存儲 書籍
文章分享：http://aaarwkj.com/article20/dssjgco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)站制作、品牌網(wǎng)站建設、外貿(mào)建站、營銷型網(wǎng)站建設、網(wǎng)頁設計公司

廣告

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