首先介紹什么叫存儲：
cache：通常把它叫做緩存，功能就是把從DB,或者磁盤拿出來的東西放在緩存里面，這樣的話可以減少讀取磁盤的IO。
磁盤文件：通常把一些圖片或者一些視頻都存放在磁盤上。
數據庫：mysql,oracle,一般都是存放一些關系型數據，表與表之間有關聯。
內存：如果放在數據庫或者磁盤的文件要頻繁的讀取的話，不如放在內存里面會提高讀取效率。通常情況下cache也是存放在內存里面的。
cookies特定：
1。http頭部會帶上cookie信息，顯得臃腫，影響請求速度。
2。Cookie的數據大小限制只能為4kb數據，如果數據長度超過4kb數據，超過后的數據將返回空字符串。
3。如果把cookie都存在主域名下，子域名訪問http請求的話都是帶上主域名下的cookie，會減慢訪問速度。
4. Cookie是有域的概念的，在不同的域下，cookie不能互相使用，cookie對於那個域是有效的，所有向該域發送的請求中都會包含這個cookie 的信息的，
Cookie是有 有效期概念的，如果想要cookie存儲多長時間，可以設置cookie的時間，一般的情況下，cookie的生命周期是在游覽器關閉的時候失效，cookie可在瀏覽器關閉后依然保存在用戶的 機器上(同一個瀏覽器，不同的瀏覽器不能保存),如果設置的日期是過期的日期，那么cookie立刻刪掉。
Cookie路徑的概念：對於指定域中的那個路徑，應該向服務器發送cookie，比如我們可以指定cookie只有從http://www.zuixiandao.cn/books/中才能訪問，那么http://www.zuixiandao.cn的頁 面就不會發送cookie信息。
++++++++++++++++++++
sessionStorage 和 localStorage
Html5新增了兩個本地存儲數據，分別是sessionStorage 和 localStorage.
瀏覽器支持程度如下：
注意：IE8 及 以上都支持 web storage。
sessionStorage: 將數據保存在session對象中，所謂session，指用戶瀏覽某個網站時，從進入網站到瀏覽器關閉的這段時間，也就是用戶瀏覽這個網站所花費的時間。
生命周期：指只在當前的窗口有效，打開一個新的同源窗口，或者說重啟瀏覽器都失效。
數據大小：可以保存5MB甚至更多。
localStorage: 將數據保存在客戶端本地的硬件設備(通常是指硬盤，但也可以是其他硬件設備)，即使瀏覽器被關閉了，該數據依然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。但是，數據保存是按不同的瀏覽器分別進行的，也就是說，如果打開別的瀏覽器，是讀取不到在這個瀏覽器中保存的數據的。
生命周期：數據一直保存在硬盤中。持久性保存(但是不同的瀏覽器保存的數據，是不能通用的)。
數據大小：可以保存5MB甚至更多的數據。
cookie 與 sessionStorage 及 localStorage的區別；
共同點：都是在客戶端存儲數據，且是同源的。
區別：
存儲大小不一樣；cookie存儲數據最大只能為4kb，而sessionStorage與localStorage可以保存5MB甚至更多數據。
Cookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器與服務器之間來回傳遞，而sessionStorage與localStorage不會自動發給服務端，僅在本地保存。
數據有效期不同；sessionStorage僅在當前瀏覽器窗口未關閉之前有效(同源的新窗口不生效)，localStorage僅在當前的瀏覽器下永久生效(不同的瀏覽器不能共享數據)，不管關閉了 重新打開的 還是生效的。Cookie只在設置的cookie過期時間之前一直有效，即使窗口或者瀏覽器關閉，或者打開新的同源窗口。
作用域不同；sessionStorage不在不同的瀏覽器窗口中共享，即是同一個頁面，localStorage在所有的同源窗口（子域之間不能共享數據，不支持改domain，可以用postMassage）中都是共享的(只在相同的瀏覽器下)，cookie在所有的同源窗口（子域之間可以把各自的domain改成和主域一樣來實現共享數據）都是共享的(僅在同一個瀏覽器中)。
SessionStorage與LocalStorage他們都擁有相同的方法；
- setItem存儲value
用法：.setItem( key, value)，代碼如下：
localStorage.setItem(key,value)：將value存儲到key字段 - getItem獲取value
用法：.getItem(key) 代碼如下：
localStorage.getItem(key):獲取指定key本地存儲的值 - removeItem刪除key
用法：.removeItem(key)，代碼如下：
localStorage.removeItem(key):刪除指定key本地存儲的值 - clear清除所有的key/value
用法：.clear()，代碼如下：
localStorage.clear(); 清除所有的數據(firefox除外)
它將刪除所有同源的本地存儲的localStorage數據
而對於Session Storage，它只清空當前會話存儲的數據。
sessionStorage也有上面一樣的方法；
只要能序列化成字符串就能存在storage里面，圖片可以用canvas的drawImage嵌入圖片，再用 toDataURL轉為路徑字符串存起來。如下圖：
手動控制localstorage的過期控制：
indexedDB（以前叫做Web Sql）
雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的數據庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的數據庫，而且支持標准的SQL的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。
移動端支持的比較弱一些，移動端主要支持web sql，但是W3C已經不再維護web sql
詳細用法參考indexDB筆記
http://www.cnblogs.com/dolphinX/p/3415761.html
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
以下是Web Sql的基本用法和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離線緩存
