html5存儲圖片

⑴ HTML5本地資料庫存儲數據代碼相關問題

一個網站如何能在客戶的瀏覽器存儲更多的數據呢？

在Html4的時代在瀏覽器端存儲點網站個性化的數據，尤其是用戶瀏覽器的痕跡，用戶的相關數據等一般只能存儲在Cookie中，但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡，想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代，這一切都不叫事...

一、本地存儲由來的背景

眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。

下面是Cookie的限制：

• 1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。

• 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。

• 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。

• 4, Cookie默認情況都會隨著Http請求發送到後台伺服器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。

Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地資料庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。

二、會話級別的本地存儲：sessionStorage

在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，數據會自動清除，跟未設置過期時間的Cookie類似。

sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• sessionStorage.setItem("demokey", "hek.com");


• //通過key來獲取value


• var dt = sessionStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //sessionStorage.clear();


• alert(sessionStorage.length);


• </script>





對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。




參考在線演示demo

三、永久本地存儲：localStorage

在最新的JS的API中增加了localStorage對象，以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器，而且存儲數據的大小機會不用考慮，因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。

localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• localStorage.setItem("demokey", "httpcom");


• //通過key來獲取value


• var dt = localStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //localStorage.clear();


• alert(localStorage.length);


• </script>



四、逆天了本地資料庫

雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫，而且支持標準的sql的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。

操作本地資料庫的最基本的步驟是：

• 第一步：openDatabase方法：創建一個訪問資料庫的對象。

• 第二步：使用第一步創建的資料庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.

• 第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。

接下來分別介紹一下相關的方法的參數和用法。

（1）openDatabase方法：

• //Demo：獲取或者創建一個資料庫，如果資料庫不存在那麼創建之


• var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });



openDatabase方法打開一個已經存在的資料庫，如果資料庫不存在，它還可以創建資料庫。幾個參數意義分別是：

• 1，資料庫名稱。

• 2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；

• 3，對資料庫的描述。

• 4，設置分配的資料庫的大小（單位是kb）。

• 5，回調函數(可省略)。

• 初次調用時創建資料庫，以後就是建立連接了。

（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

• ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)



參數說明：

• qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；

• value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中

• ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；

• 4,errorHandler：執行失敗時調用的回調函數；

⑵ 關於html5 的 LocalStorage 本地存儲

以下是五大瀏覽器localStorage存儲方式：

除了Opera瀏覽器採用BASE64加密外（BASE64也是可以輕松解密的），其他瀏覽器均採用明文存儲數據。

所以，建議不要使用localStorage方式存儲敏感信息，那怕這些信息進行過加密。

以上參考《HTML5本地存儲localstorage安全分析》

http://blog.csdn.net/yangdeli888/article/details/7735260

⑶ html5和html有什麼區別啊

1、文檔聲明區別：

HTML：超文本標記語言，一種純文本類型的語言。

HTML5.0：文檔聲明HTML5方便書寫，精簡，有利於程序員快速的閱讀和開發。

2、結構語義區別

html：沒有體現結構語義化的標簽，春念察如：<div id="nav"></div>

html5：添加了許多具有語義化的標簽，如：<article>、<aside>、<audio>、<bdi>...

3、繪圖區別

HTML：指可伸縮矢量圖形，用於定義網路的基於矢量的圖形。

HTML5：HTML5的canvas元素使用腳本（通常使用JavaScript）在網頁上繪制圖像，可以控制畫布每一個像素。

(3)html5存儲圖片擴展閱讀

HTML5的特徵

1、語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更扒茄有價值的數據驅動的Web。

2、本地存儲特性（Class: OFFLINE & STORAGE）

基於HTML5開發的網頁APP擁有更短的啟動時間，更快的聯高粗網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。

參考資料

網路-HTML5

⑷ html5 微信公眾號 長按圖片沒有彈出發送給朋友，顯示的是保存圖片

你需要自己去公眾號設置轉發 並在代碼中把分享的代碼寫上

⑸ html5或者JS怎樣調用手機攝像頭或者相冊

你給的網頁用的是 <input accept="image/*" type="file">，在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。

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

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

2. 保存之後開始構建html，我們這里示例用一個文本框兩個按鈕和一個顯示數據的div，如下圖：

3. 之後寫js事件，當點擊「保存」的時候，把文本框的內容保存到sessionStorage中，當點擊「顯示」的時候，把保存的數據從sessionStorage中讀取出來顯示在頁面上。

4. 完整代碼如下，我們可以在瀏覽器預覽，然後點擊試試效果，可以發現能夠存儲和顯示。

5. 

⑺ HTML5可以做些什麼

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然在技術人員在開發過程中可能不會將這些新技術投入應用，但是對於該種技術的新特性網站開發技術人員是必須要有所了解的。[1]

2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標准規范終於制定完成。

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

智能表單

表單是實現用戶與頁面後台交互主要組成部分，HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式，再加上新增加的一.些表單標簽，使得原本需要JavaScript來實現的控制項，可以直接使用HTML5的表單來實現；一些如內容提示、焦點處理、數據驗證等功能，也可以通過THML5的智能表單屬性標簽來完成。[6]

圖2 HTML5

繪圖畫布

HTML5的canvas元索可以實現畫布功能，該元索通過自帶的API結合使用JavaScript腳本語自在網頁上繪制圖形和處理，擁有實現繪制線條、弧線以及矩形，用樣式和顏色填充區域，書寫樣式化文本，以及添加圖像腔祥宴的方法，且使用JavaScript可以控制其每一個像素。HTML5的canvas元索使得瀏覽器無需Flash或Silverlight等插件就能直接顯示圖形或動畫圖像。[6]

多媒體

HTML5最大特色之一就是支持音頻視頻，在通過增加了<audio>、<video>兩個標簽來實現對多媒體中的音頻、視頻使用的支持，只要在Web網頁中嵌人這兩個標簽，而無需第三方插件（如Flash）就可以實現音視頻的播放功能。HTML5對音頻、視頻文件的支持使得瀏覽器擺脫了對插件的依賴，加快了貞面的載入速度，擴展了互聯網多媒體技術的發展空間。[6]

地理定位

現今移動網路備受青睞，用戶對實時定位的應用越來，要求也越來越高。HTML5通過引人Geolocation的API可以通過GPS或網路信息實現用戶的定位功能，定位更加准確、靈活。通過HTML5進行地位，除了可以定位自己的位置，還可以在他人對你開放信息的情況下獲得他人的定位信息。[6]

數據存儲

HTML5較之傳統的數據存儲有自已的存儲方式，允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求，HTML5支持DOM Storage和Web SQL Database 兩種存儲機制。其中，DOM Storage 適用於具有key/value對的基本本地存儲；而WebSQLDatabase是適用於關系型資料庫的存儲方式，開發者可以伍銀使用SQL語法對這些數據進行查詢、插入等操作。[6]

多線程

HTML 5利用Web Worker將Web應用程序從原來的單線程業界中解放出來，通過創建一個Web Worker對象就可以實現多線程操作。JavaScript創建的Web程序處理事務都是在單線程中執行，響應時間較長，而當JavaScript過於復雜時，還有可能出現死鎖的局面。HTML5新增加了一個WebWorkerAPI，用戶可以創建多個在後台的線程，將耗費較長時間的處理交給後檯面不影響用戶界面和響應速度，這些處理不會因用戶交互而運行中斷。使用後台線程不能訪問頁面和窗口對象，但後台線程可以和貞面之間進行數據交互。子線程與子線程之間的數據交互，大致步驟如下：①先創建發送數據的子宴虛線程；②執行子線程任務，把要傳遞的數據發送給主線程；③在主線程接受到子線程傳遞回的消息時創建接收數據的子線程，然後把發送數據的子線程中返回的消息傳遞給接收數據的子線程；④執行接收數據子線程中的代碼

詳細請參考html5

教程請參考html5教程

⑻ html4和html5的區別

HTML5與HTML4區別如下：

1、語法簡化

HTML、XHTML的DOCTYPE、html、meta、script等標簽，在HTML5中有大幅度的簡化。

2、統一網頁內嵌多媒體語法

以前，在網頁中播放多媒體時，需要使用ActiveX或讓穗Plug-in的方式來完成。有了HTML5之後，使用<video>或<audio>標簽播放視頻和音頻，不需要在安裝其他的什麼來播放了。

3、新增了語義標簽

為了增加網頁的可讀性，HTML5增加了<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>語義標簽。

4、HTML5廢除了一些舊標簽

廢除的大部分是網頁美化方面的標簽，例如：<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>。纖滑世對<frame>框架，不能使用。

5、全新的表單設計

表單是網頁設計者最常用的功能，HTML5對表單做了很大的更改，不但新增了幾項新的標簽，對原來的<form>標簽也增加了許多屬性。

6、新增了<canvas>標簽，可以繪制圖形

HTML5新增了具有繪圖功能的<canvas>

(8)html5存儲圖片擴展閱讀

HTML5新特徵

1、表單是實現用戶與頁面後台交互主要組成部分，HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式，再加上新增加的一些表單標簽，使得原本需要JavaScript來實現的控制項，可以直接使用HTML5的表單來實現。

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

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

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

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

⑼ html5是什麼干什麼的

就主要而言，HTML是一種標記語言，是網頁的規范編程語言

1.主要適用於面向Web編程

【例如】Wechat公眾號的部分HTML5小游戲，Web端的網頁包括網路/谷歌都是使用HTML的

【圖片例子】Google搜索界面和Bai圖片界面

【特點】一個網頁可以包含圖像，圖形，視頻，音頻，文字，動畫等不同的多媒體信息，網頁主要適用HTTP/FTP協議，遍布各個范疇，任何一個編程語言都必須被轉化為純HTML格式才可以被讀取，因此其在互聯網上是很高的地位。

⑽ HTML5本地存儲代碼相關問題

給你個例子領悟下吧

<scripttype="text/javascript">
varid=0;
vardb=getCurrentDb();//初始化資料庫
show();
functionadd(){
save(id,document.getElementById("txtSendContent").value);
show();
}
functiongetCurrentDb(){
//打開資料庫，或者直接連接資料庫參數：資料庫名稱，版本，概述，大小
//如果資料庫不存在那麼創建之
vardb=openDatabase("Msg","1.0","it'stosavedemodata!",1024*1024);;
returndb;
}
functionshow(){
db.transaction(function(tx){
tx.executeSql("createtableifnotexistsMsg(idinteger,valuetext)",[]);
tx.executeSql("select*fromMsg",[],function(tx,rs){
document.getElementById("ulContent").innerHTML='';
for(vari=0;i<rs.rows.length;i++){
document.getElementById("ulContent").innerHTML+="<fontcolor='red'>mesay</font>
:<li>"+rs.rows.item(i).value+"</li>
";
id=rs.rows.item(i).id+1;
}
});
})
}
functiondel(){
db.transaction(function(tx){
tx.executeSql("insertintoMsgvalues(?,?)",[id,value],function(tx,rs){
alert("InsertSuccess!");
},function(tx,error){
alert(error.source+"::"+error.message);}
);
})
}
functionsave(id,value){
db.transaction(function(tx){
tx.executeSql("insertintoMsgvalues(?,?)",[id,value],function(tx,rs){
alert("a1");
},function(tx,error){
alert(error.source+"::"+error.message);}
);
})
}
</script>