HTML5的5種存儲(chǔ)方式詳解

引言

成都創(chuàng)新互聯(lián)公司2013年至今，先為濟(jì)南等服務(wù)建站，濟(jì)南等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為濟(jì)南企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

正文開始~

h5之前，存儲(chǔ)主要是用cookies。cookies缺點(diǎn)有在請(qǐng)求頭上帶著數(shù)據(jù)，大小是4k之內(nèi)。主Domain污染。

主要應(yīng)用：購物車、客戶登錄

對(duì)于IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。

目標(biāo)

存儲(chǔ)方式：

以鍵值對(duì)(Key-Value)的方式存儲(chǔ)，永久存儲(chǔ)，永不失效，除非手動(dòng)刪除。

大?。?/p>

每個(gè)域名5M

支持情況：

注意：IE9 localStorage不支持本地文件，需要將項(xiàng)目署到服務(wù)器，才可以支持！

常用的API：

getItem //取記錄

setIten//設(shè)置記錄

removeItem//移除記錄

key//取key所對(duì)應(yīng)的值

clear//清除記錄

存儲(chǔ)的內(nèi)容：

數(shù)組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內(nèi)容都可以存儲(chǔ)）

HTML5 的本地存儲(chǔ) API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空，而 localStorage 則會(huì)一直保存。

本地緩存應(yīng)用所需的文件

使用方法：

①配置manifest文件

頁面上：

Manifest 文件：

manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。

manifest 文件可分為三個(gè)部分：

①CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存

②NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存

③FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）

完整demo：

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

如Tomcat:

常用API：

核心是applicationCache對(duì)象，有個(gè)status屬性，表示應(yīng)用緩存的當(dāng)前狀態(tài)：

0（UNCACHED） : 無緩存， 即沒有與頁面相關(guān)的應(yīng)用緩存

1（IDLE） : 閑置，即應(yīng)用緩存未得到更新

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

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

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

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

相關(guān)的事件：

表示應(yīng)用緩存狀態(tài)的改變：

checking : 在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)

error : 在檢查更新或下載資源期間發(fā)送錯(cuò)誤時(shí)觸發(fā)

noupdate : 在檢查描述文件發(fā)現(xiàn)文件無變化時(shí)觸發(fā)

downloading : 在開始下載應(yīng)用緩存資源時(shí)觸發(fā)

progress：在文件下載應(yīng)用緩存的過程中持續(xù)不斷地下載地觸發(fā)

updateready : 在頁面新的應(yīng)用緩存下載完畢觸發(fā)

cached : 在應(yīng)用緩存完整可用時(shí)觸發(fā)

Application Cache的三個(gè)優(yōu)勢(shì)：

① 離線瀏覽

② 提升頁面載入速度

③ 降低服務(wù)器壓力

注意事項(xiàng)：

1. 瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn) 5MB）

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

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

4. 瀏覽器會(huì)自動(dòng)緩存引用manifest文件的HTML文件，這就導(dǎo)致如果改了HTML內(nèi)容，也需要更新版本才能做到更新。

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

7. 更新完版本后，必須刷新一次才會(huì)啟動(dòng)新版本（會(huì)出現(xiàn)重刷一次頁面的情況），需要添加監(jiān)聽版本事件。

8. 站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存中也從緩存中訪問

9. 當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新

離線緩存與傳統(tǒng)瀏覽器緩存區(qū)別：

1. 離線緩存是針對(duì)整個(gè)應(yīng)用，瀏覽器緩存是單個(gè)文件

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

3. 離線緩存可以主動(dòng)通知瀏覽器更新資源

關(guān)系數(shù)據(jù)庫，通過SQL語句訪問

Web SQL 數(shù)據(jù)庫 API 并不是 HTML5 規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫的 APIs。

支持情況：

Web SQL 數(shù)據(jù)庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法：

①openDatabase： 這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個(gè)數(shù)據(jù)庫對(duì)象。

②transaction： 這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。

③executeSql： 這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。

打開數(shù)據(jù)庫：

執(zhí)行查詢操作：

插入數(shù)據(jù)：　

讀取數(shù)據(jù)：

由這些操作可以看出，基本上都是用SQL語句進(jìn)行數(shù)據(jù)庫的相關(guān)操作，如果你會(huì)MySQL的話，這個(gè)應(yīng)該比較容易用。

索引數(shù)據(jù)庫 (IndexedDB) API（作為 HTML5 的一部分）對(duì)創(chuàng)建具有豐富本地存儲(chǔ)數(shù)據(jù)的數(shù)據(jù)密集型的離線 HTML5 Web 應(yīng)用程序很有用。同時(shí)它還有助于本地緩存數(shù)據(jù)，使傳統(tǒng)在線 Web 應(yīng)用程序（比如移動(dòng) Web 應(yīng)用程序）能夠更快地運(yùn)行和響應(yīng)。

異步API：

在IndexedDB大部分操作并不是我們常用的調(diào)用方法，返回結(jié)果的模式，而是請(qǐng)求——響應(yīng)的模式，比如打開數(shù)據(jù)庫的操作

這樣，我們打開數(shù)據(jù)庫的時(shí)候，實(shí)質(zhì)上返回了一個(gè)DB對(duì)象，而這個(gè)對(duì)象就在result中。由上圖可以看出，除了result之外。還有幾個(gè)重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請(qǐng)求打開的數(shù)據(jù)庫的版本號(hào)和已經(jīng)存在的數(shù)據(jù)庫版本號(hào)不一致的時(shí)候調(diào)用）。這就類似于我們的ajax請(qǐng)求那樣。我們發(fā)起了這個(gè)請(qǐng)求之后并不能確定它什么時(shí)候才請(qǐng)求成功，所以需要在回調(diào)中處理一些邏輯。

關(guān)閉與刪除：

數(shù)據(jù)存儲(chǔ)：

indexedDB中沒有表的概念，而是objectStore，一個(gè)數(shù)據(jù)庫中可以包含多個(gè)objectStore，objectStore是一個(gè)靈活的數(shù)據(jù)結(jié)構(gòu)，可以存放多種類型數(shù)據(jù)。也就是說一個(gè)objectStore相當(dāng)于一張表，里面存儲(chǔ)的每條數(shù)據(jù)和一個(gè)鍵相關(guān)聯(lián)。

我們可以使用每條記錄中的某個(gè)指定字段作為鍵值（keyPath），也可以使用自動(dòng)生成的遞增數(shù)字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲(chǔ)的數(shù)據(jù)結(jié)構(gòu)也有差異。

學(xué)習(xí)從來不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問題的小伙伴可以私信“學(xué)習(xí)”小明獲取web前端入門資料，一起學(xué)習(xí)，一起成長(zhǎng)！

我見過html5前端哪些驚艷的demo

印象中看過一個(gè)用HTML5做的3D立體書（不是Google那個(gè)），當(dāng)時(shí)覺得很驚艷，可是后來再也找不到了。

祝生活愉快！

望采納！謝謝????！

用HTML5做一個(gè)類似于微信聯(lián)系人的一個(gè)demo，遇到一點(diǎn)問題

touchMove 要結(jié)合使用touchstar,touchend進(jìn)行判斷的。

沒有做過類似的東西，但是下面的是仿微信圖片瀏覽的代碼，寫了注釋，希望對(duì)你有點(diǎn)幫助！

script

function imgreset(){

$(this).css3Animate({

width: imgoldw+"px",

//x:0,

//y:0,

time: "0ms",

callback: function () {

pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null;

pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null;

dm=0;dn=0;

imgneww=imgoldw

}

});

}

var imgoldw=320;//獲取圖片寛度

var imglength=$(".imgbox").length;//獲取圖片個(gè)數(shù)

var demos = document.getElementById("container"),

spirit, startScale, startRotation;

var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0;

var body_w=$("body").width();

var body_h=$("body").height();

var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e;

function touchStart(e) {

//e.stopPropagation();

e.preventDefault();

if(e.touches.length == 1){

ismove=true;

var touch1 = e.touches[0];

pagexm1_s = touch1.pageX;

pageym1_s = touch1.pageY;

}

if (e.touches.length == 2){

var touch1 = e.touches[0];

pagex1_s = touch1.pageX;

pagey1_s = touch1.pageY;

var touch2 = e.touches[1];

pagex2_s = touch2.pageX;

pagey2_s = touch2.pageY;

left = Math.min(pagex1_s, pagex2_s),

top = Math.min(pagey1_s, pagey2_s),

width = Math.abs(pagex1_s - pagex2_s),

height = Math.abs(pagey1_s - pagey2_s);

}

}

function touchMove(e){

//e.stopPropagation();

e.preventDefault();

if (ismovee.touches.length == 1){

//單點(diǎn)觸摸

var touch1 = e.touches[0],

pagexm1_e = touch1.pageX,

pageym1_e = touch1.pageY,

//移動(dòng)了多少

dx=pagexm1_e-pagexm1_s,

dy=pageym1_e-pageym1_s;

//是多少

dm=dx+dm;

dn=dy+dn;

if(imgneww==imgoldw){

$(this).css3Animate({

x:dm,

//y:dn,

time: "0ms",

callback: function () {

}

});

//如果圖未放大，則執(zhí)行翻頁

}else{

//如果圖片已經(jīng)被放大，則可以拖動(dòng)

$(this).css3Animate({

x:dm,

y:dn,

time: "0ms",

callback: function () {

//記錄新位置

}

});

}

pagexm1_s=pagexm1_e,pageym1_s=pageym1_e;

}

if (e.touches.length == 2){

//多點(diǎn)觸摸

var touch1 = e.touches[0];

pagex1_e = touch1.pageX;

pagey1_e = touch1.pageY;

var touch2 = e.touches[1];

pagex2_e = touch2.pageX;

pagey2_e = touch2.pageY;

//計(jì)算兩點(diǎn)開始距離 old

var oldx=Math.abs(pagex1_s-pagex2_s),

oldy=Math.abs(pagey1_s-pagey2_s),

//計(jì)算兩點(diǎn)開始距離 new

newx=Math.abs(pagex1_e-pagex2_e),

newy=Math.abs(pagey1_e-pagey2_e);

if(oldxnewxoldynewy){

var imgw=$(this).width();//獲取圖片寛度

resizex=oldx-newx;//縮小多少

var resizey=oldy-newy;//縮小多少

if(imgwimgoldw){

$(this).css3Animate({

width: imgneww-resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

});

imgneww=imgneww-resizex;

};

}else{

var imgw=$(this).width();//獲取圖片寛度

var resizex=Math.abs(oldx-newx);

var resizey=Math.abs(oldy-newy);//縮小多少

if(imgw640){

$(this).css3Animate({

width: imgneww+resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

});

imgneww=imgneww+resizex;

}

}

}

pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e;

}

function touchEnd(e) {

e.preventDefault();

var imglength=$(".imgbox").length;

var id=parseInt($(this).attr("id").substr(9));

if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=imglength-1){

$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}else if(ismoveimgneww==imgoldwdm0Math.abs(dm)body_w/2id!=0){

$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}else{

if(ismoveimgneww==imgoldw){

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0;

}

});

}

}

ismove=false;

}

function gestureEnd(e) {

e.preventDefault();

if (!spirit) return;

canvas.removeChild(spirit);

spirit = null;

startScale = null;

startRotation = null;

}

/* $(".imgbox img").bind("touchstart", touchStart, false);

$(".imgbox img").bind("touchmove", touchMove, false);

$(".imgbox img").bind("touchend", touchEnd, false);

$(".imgbox img").bind("gestureend", gestureEnd, false);

$(".imgbox img").bind("tap", imgreset, false);

*/

/script

HTML5 有哪些讓你驚艷的 demo？

說起特效來，HTML5還是很值得稱道的：

1、HTML5 Canvas發(fā)光Loading動(dòng)畫

之前我們分享過很多基于CSS3的Loading動(dòng)畫效果，相信大家都很喜歡。今天我們要來分享一款基于HTML5Canvas的發(fā)光Loading加載動(dòng)畫特效。Loading旋轉(zhuǎn)圖標(biāo)是在canvas畫布上繪制的，整個(gè)loading動(dòng)畫是發(fā)光3D的視覺效果，HTML5非常強(qiáng)大。

2、jQuery球狀放大鏡特效插件

今天我們要來分享一款基于jQuery的放大鏡特效插件，和其他放大鏡不同的是，這款jQuery放大鏡插件是球狀的，看上去有3D的視覺效果。當(dāng)你把鼠標(biāo)滑過頁面上的文字時(shí)，即會(huì)出現(xiàn)很酷的球狀放大鏡，來放大當(dāng)前區(qū)域的文字。并且以球心為中心點(diǎn)向外文字逐漸變小，這就產(chǎn)生了立體感。

3、HTML5 Canvas粒子模擬效果

這是一款利用Canvas模擬出來的30000個(gè)粒子動(dòng)畫，當(dāng)你用鼠標(biāo)在canvas畫布上移動(dòng)時(shí)，鼠標(biāo)周圍的一些粒子就會(huì)跟著你移動(dòng)，并形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯(cuò)。這里，我們應(yīng)用了一些HTML5的特性，讓這個(gè)粒子動(dòng)畫顯得相當(dāng)動(dòng)感。

4、HTML5/CSS3帶區(qū)域地圖的聯(lián)系表單

之前我們分享很多樣式和功能各異的CSS3聯(lián)系表單，比如HTML5/CSS3簡(jiǎn)易聯(lián)系表單等等，都非常不錯(cuò)。今天我們要來分享一款功能更加強(qiáng)大的HTML5/CSS3聯(lián)系表單，它可以選中不同區(qū)域顯示相應(yīng)的地圖，然后針對(duì)該區(qū)域填寫聯(lián)系表單。

5、CSS3 3D立方體Loading加載動(dòng)畫特效

之前我們分享過一些HTML5和CSS3的3D立方體特效，他們都是可以旋轉(zhuǎn)來展示3D立體的效果。這次分享的這款CSS3 3D立方體確是用來做Loading加載動(dòng)畫的，9個(gè)小立方體上下浮動(dòng)，呈現(xiàn)波浪的效果，并且，這個(gè)Loading動(dòng)畫還利用了CSS3的陰影屬性讓這些立方體更充滿3D色彩。

希望你也可以學(xué)起來呀~

哪些網(wǎng)站上有html5開發(fā)demo，涉及js交互的

可以去H5edu看看，其HTML5培訓(xùn)課程融合了HTML5開發(fā)基礎(chǔ)課程、CSS3基礎(chǔ)課程和移動(dòng)前端交互JavaScript+JQuery+Ajex等課程,從入門到精通,讓開發(fā)者全面學(xué)習(xí)HTML5

當(dāng)前名稱：html5demo,html5的模擬器怎么打開
標(biāo)題路徑：http://aaarwkj.com/article48/dssgjep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

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