使用HTML5 Web儲存實現離線工作
摘要：HTML5是一個新的HTML標準，它擁有大量新的功能和佈局技術。它完全支援多媒體、CSS3以及使用畫布和可縮放向量圖形(Scalable Vector Graphics, SVG)的繪圖功能。HTML5供了新的語義元素，還提供了恰當的使用應用程式快取器、JavaScript worker、新版本的XMLHttpRequest 一種名為Web儲存的工具建立HTML Web應用程式的方式。
本文將探討Web儲存的強大功能，以及它成為一種優於cookies的儲存方法的原因。通過本文您將瞭解基本概念、瀏覽器支援和HTML5 Web儲存物件。
概述
Cookies從JavaScript出現之初就一直存在，所以在Web上儲存資料並不是個新概念。不過Web儲存是資料儲存的一種更為強大的版本，可提供更多的安全性、速度和易用性。在Web儲存中還可以儲存數量巨大的資料。具體的數量則取決於Web瀏覽器，但通常都在5MB到10MB之間，這對於一個HTML應用程式而言已經足夠大。另一個好處是此資料並不會在每次出現伺服器請求時都被載入。惟一的限制是不能在瀏覽器之間分享Web儲存, 如果您在Safari中儲存了資料，那麼該資料在Mozilla Firefox中是無法訪問的。
內建到HTML5中的Web儲存物件有兩種型別：
- sessionStorage 物件負責儲存一個會話的資料。如果使用者關閉了頁面或瀏覽器，則會銷燬資料。
- The localStorage 物件負責儲存沒有到期的資料。當Web頁面或瀏覽器關閉時，仍會保持資料的儲存，當然這還取決於為此使用者的瀏覽器設定的儲存量。
常用的縮寫語
- API：應用程式程式設計介面 (Application Programming Interface)
- CSS：級聯樣式表 (Cascading Style Sheet)
- HTML：超文字標記語言 (HyperText Markup Language)
- JSON：JavaScript Serialized Object Notation
這兩種儲存物件具有相同的方法和屬性。為了獲得一致性，本文在所有的示例中使用的都是localStorage物件。
在本文中，我們將瞭解Web儲存的強大功能，以及它成為優於cookies的一種儲存方式的原因。本文還將探索基本的Web儲存概念、HTML5 Web儲存方法和瀏覽器支援。
您可以下載 本文示例中使用的原始碼。
瀏覽器支援
所有最新的瀏覽器版本均支援Web儲存特性，這些瀏覽器包括Firefox、Google Chrome、Safari、Opera和Microsoft® Windows® Internet Explorer® 8+。不幸地是，Internet Explorer 7和更早版本不支援Web儲存。表 1顯示了支援 HTML5 Web儲存的每個桌面瀏覽器版本。
表 1. HTML5 Web儲存的桌面瀏覽器支援
除了Opera Mini之外，其他移動瀏覽器也提供了對HTML5 Web儲存的支援。表 2 顯示了支援HTML5 Web儲存的每個移動瀏覽器版本。
表 2. HTML5 Web儲存的移動瀏覽器支援
HTML5 Web儲存的瀏覽器支援十分令人矚目。但是，較老的瀏覽器要求在使用之前檢查Web儲存支援的瀏覽器。為了瞭解Web儲存支援而對瀏覽器進行檢查非常簡單。可以使用一個簡單的條件語句來檢視HTML5儲存物件是否已經定義。如果已經定義，就可以放心進行Web儲存指令碼編寫。如果未定義，而資料儲存又是必需的，則需要採用一種備選方法，比如JavaScript cookie。清單 1的例子顯示了一種簡單的為Storage物件進行瀏覽器檢查的方式。
清單 1.Web儲存支援的瀏覽器檢查
| 123456789101112131415161718192021222324252627 | <ol class="dp-xml"><li class="alt"><span><span>if(typeof(Storage)!== "undefined") { </span></span></li><li><span> // Web storage is supported </span></li><li class="alt"><span>} </span></li><li><span>else { </span></li><li class="alt"><span> // Web storage is NOT supported </span></li><li><span>} </span></li></ol> |
如果瀏覽器不支援Web儲存，那麼您可以使用JavaScript cookie或一個現有的庫（比如 AmplifyJS）來建立一個定製的Web儲存物件。AmplifyJS是一組元件，旨在通過一個簡單的API解決常見Web應用程式問題，包括某些瀏覽器中的Web儲存支援。AmplifyJS用amplify.store包裝程式來處理持久的客戶端儲存，它支援Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。這個庫還支援一個持久的API來處理跨瀏覽器儲存；您無需基於具體的瀏覽器編寫不同的程式碼。如果瀏覽器支援HTML5 Web儲存，那麼AmplifyJS就會使用最新的儲存技術。如果瀏覽器不支援HTML5 Web儲存，那麼AmplifyJS就會降級，以支援沒有該功能的儲存。請參閱參考資料，更多地瞭解AmplifyJS以及用於其儲存包裝程式的API。
入門
有幾種簡單易用的方法可提供HTML5 Web儲存功能。這些方法支援設定一個鍵/值對，提供了兩個基於鍵來檢索某個值的選項，同時清除所有的鍵/值對，並刪除了某個特定的鍵/值對。表3顯示了可用的HTML5 Web儲存方法。
表 3.HTML5 Web儲存方法
在建立並將鍵/值對新增到此Web儲存物件時，可以使用任何型別作為鍵/值對中的值（字串、數值、陣列、物件等）。要儲存一個數組或物件，則必須使用JSON物件通過JSON.stringify 方法將資料轉換為一個字串。在檢索此資料時，可以使用JSON.parse 進行檢索，它會返回原始狀態的物件或資料。還有兩種向Web儲存物件新增鍵/值對的不同方式。第一種方式是使用setItem方法，如清單 2所示。
清單 2.使用setItem方法向Web儲存物件新增鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>localStorage.setItem(\'myKey\', \'myValue\'); </span></span></li></ol> |
向Web儲存物件新增鍵/值對的第二種方法是使用帶dot引數的Web儲存物件來直接設定此鍵的值，如清單 3所示。
清單 3.直接向Web儲存物件新增鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span class="attribute">localStorage.myKey</span><span> = </span><span class="attribute-value">\'myValue\'</span><span>; </span></span></li></ol> |
檢索所儲存的值同樣十分簡單，也有兩種方式。第一種方式是使用getItem方法，它接受鍵作為引數並返回相應的值（如果存在）。清單 4顯示了一個示例。
清單 4.使用getItem從Web儲存物件中檢索鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>localStorage.getItem(\'myKey\'); </span></span></li></ol> |
從Web儲存物件中檢索鍵/值對的第二個方法是使用dot引數直接訪問它，如清單5所示。該示例返回了在之前的例子中設定的 \’myValue\’字串值。
清單 5.直接從Web儲存物件中檢索鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>localStorage.myKey; </span></span></li></ol> |
有兩種方法可以刪除所儲存的資料。可以同時刪除所有項，也可以一次刪除個別項。要同時從Web儲存物件中刪除所有項，可以使用clear方法，如清單6所示。
清單 6.從Web儲存物件中刪除所有鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>localStorage.clear(); </span></span></li></ol> |
要從Web儲存物件中刪除單個鍵/值對，需要使用removeItem方法。清單7顯示了removeItem方法的一個示例，它接受一個鍵作為引數，並確定哪個鍵/值對要從此儲存物件刪除。
清單 7.從Web儲存物件中刪除單個鍵/值對
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>localStorage.removeItem(\'myKey\'); </span></span></li></ol> |
清單 8顯示了一個如何使用JSON物件通過JSON.stringify方法將一個數組儲存為字串的示例。可以採用相同的方法處理物件。
清單 8.在HTML5 Web儲存中將一個數組儲存為字串
| 1234567891011 | <ol class="dp-xml"><li class="alt"><span><span>var </span><span class="attribute">myArray</span><span> = </span><span class="attribute-value">new</span><span> Array(\'First Name\', \'Last Name\', \'Email Address\'); </span></span></li><li><span class="attribute">localStorage.formData</span><span> = </span><span class="attribute-value">JSON</span><span>.stringify(myArray); </span></li></ol> |
要從Web儲存檢索陣列的字串版本，並將它轉換回一個可用的JavaScript陣列，只需使用JSON.parse方法，如清單9所示。
清單 9.從HTML5 Web儲存中檢索陣列的字串版本並將它轉換成一個可用的JavaScript陣列
| 1234567 | <ol class="dp-xml"><li class="alt"><span><span>var </span><span class="attribute">myArray</span><span> = </span><span class="attribute-value">JSON</span><span>.parse(localStorage.formData); </span></span></li></ol> |
Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一個本地的JSON物件，可以使用該物件來支援之前例子中的那些程式碼。如果您使用的是版本較早的瀏覽器，那麼可以下載json2.js 檔案（請參閱 參考資料）。
到目前為止，Web儲存看起來很容易使用。但是，在開始使用之前，您應該意識到在共享的機器上會存在安全性問題。Web儲存並不比cookies安全。所以不要在客戶端儲存敏感資訊，比如密碼或信用卡資訊。
工作中的Web儲存
介紹完基礎知識後，現在是時候將HTML5 Web儲存付諸於使用了。假設在您的網站上，您想要為一個Web表單提供離線支援。如果使用者提交了表單，並且在網站恢復線上時讓此表單與伺服器同步，那豈不是很不錯。HTML5可以實現此目標。
建立一個簡單的Web表單，其中包含姓名、電子郵件地址和提交按鈕，如清單10所示。
清單 10.使用HTML5 Web儲存來儲存資料的一個簡單Web表單
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103相關推薦使用HTML5 Web儲存實現離線工作摘要：HTML5是一個新的HTML標準，它擁有大量新的功能和佈局技術。它完全支援多媒體、CSS3以及使用畫布和可縮放向量圖形(Scalable Vector Graphics, SVG)的繪圖功能。HTML5供了新的語義元素，還提供了恰當的使用應用程式快取器、JavaScript worker、新 canvas入門 & HTML5 Web 儲存入門HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。 HTML5的設計目的是為了在移動裝置上支援多媒體。 最基本的： <!DOCTYPE html> <html> <head> < HTML5 Web儲存--localStorage和sessionStorage在客戶端儲存資料 HTML5 提供了兩種在客戶端儲存資料的新方法： localStorage - 沒有時間限制的資料儲存 sessionStorage - 針對一個 session 的資料儲存 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料 web儲存 實現本地儲存本來沒想看html5， 但是毛概課無意把書翻到那一頁，無意中看了一點， HTML5 Web 儲存 HTML5 web 儲存,一個比cookie更好的本地儲存方式。 什麼是 HTML5 Web 儲存? 使用HTML5可以在本地儲存使用者的瀏覽資料。 早些時候,本 html5 Web儲存的localStorage和sessionStorage的使用方法【圖文說明】<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u html5本地儲存實現購物車商品購買頁面 <!DOCTYPE html> <html> <head> <title>線上銷售系統</title> <meta charset="utf-8" /> <script HTML5-Service Worker實現離線頁面訪問如果提到HTML5的新API，WebSocket ，Web Workers大家應該比較熟悉。WebSocket是用於簡述請求數量的新協議，Web Workers是用於實現瀏覽器的多執行緒。而今天要介紹的Service Worker是用於頁面離線快取，提供類似Ap android Studio 實現離線工作前言：由於最近準備回老家，呆的時間長，準備晚上學會android development。 查閱了一下，順利實現離線工作。 步驟如下： 1、檢視android studio軟體中地gradle版本，如下圖所示 2,下載gradle-2.4-all.zip， 附上下載連 Web前端攻城獅培養計劃之HTML5與CSS3實現動態網頁整體 script 靜態 觸發 我們 發展方向 web前端 事件 會有 步驟1: 初識HTML5本階段內容主要涵蓋HTML5新增、刪除標簽、標簽屬性變化以及HTML5布局知識。通過本階段學習，大家可以運用HTML5標簽輕松實現網頁音樂播放器和視頻播放器，熟練運用HTML5的 HTML5新特性 Web Workers 實現多線程利用 程序 實現 -s mina 事情 輸入 運算 his 引子：（JS單線程） 什麽是webworker？ Web Worker為Web應用程序提供了一種能在後臺中運行的方法。通過Web Worker可以生成多個線程同時運行，並保證頁面對用戶的及時響應，完全不 HTML5新特性 Web Workers 實現多執行緒引子：（JS單執行緒） 什麼是webworker？ Web Worker為Web應用程式提供了一種能在後臺中執行的方法。通過Web Worker可以生成多個執行緒同時執行，並保證頁面對使用者的及時響應，完全不會影響使用者的正常操作。 單執行緒：單執行緒在程式執行時，所走的程式路徑按照連續 三十一、Html5中的web儲存一、在客戶端儲存資料的兩種方法： 1.localStorage:沒有時間限制的資料儲存； sessionStorage:針對一個session的資料儲存； 由cookie完成，但cookie不適合大量資料的儲存，因為其由每個伺服器的請求來傳遞，使得cookie速度很慢且 HTML5 本地儲存 Web StorageWeb StorageWeb Storage 是一項非常重要，並且很實用的技術，已經被大多數瀏覽器（包括IE8）所支援，在HTML4時代， 雖然cookie無處不在，但cookie仍然有自己的硬傷，如：cookie的大小是受限制的，一個cookie只能設定4KB的資料。並且大 從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi HTML5高階之Web儲存（帶示例）Web儲存 瀏覽器儲存資料 cookie 和伺服器的session HTML5新增的web儲存 --localStorage 特點：長時間儲存使用者資料 --sessionStorage 特點：瀏覽器當前視窗有效（如果瀏覽器當前視窗關閉， web/html5呼叫攝像頭實現二維碼掃描閒話不說，直接上程式碼，本人測試通過！ html/js <!DOCTYPE html> <html><head> <title>HTML5 code Reader</title> <meta http- activiti web流程設計器 工作流的 整合視頻教程 SSM和獨立部署activiti 工作流 web流程設計器 ssm activiti工作流 本視頻為activiti工作流的web流程設計器整合視頻教程整合Acitiviti在線流程設計器(Activiti-Modeler 5.21.0 官方流程設計器）本視頻共講了兩種整合方式1. 流程設計器和其它工作流 HTML5與Javascript 實現網頁彈球遊戲fonts tab tool open article idt lang true 用戶 終於效果圖： 1. 使用html 5 的canvas 技術和javascript實現彈球遊戲 總體流程圖： 1.1 html5 c [Java][Web]Request 實現轉發和 MVC 設計模式寫入 頁面 str quest 表示 請求轉發 但是 write att String data = "aaaaa"; request.setAttribute("data",data); // 將數據存在 request request.getRequestDispat web 動畫實現方式中間 fun for || wid over abs cit 播放 這這裏，總結了一些 我知道的不用框架來實現動畫的方式，總的來說有兩種，第一種是用css的transition或keyframes+animation，第二種用js來實現 首先看基本結構 <style |