首先介紹什么叫存儲(chǔ)：
cache：通常把它叫做緩存蓝厌，功能就是把從DB,或者磁盤(pán)拿出來(lái)的東西放在緩存里面，這樣的話可以減少讀取磁盤(pán)的IO。
磁盤(pán)文件：通常把一些圖片或者一些視頻都存放在磁盤(pán)上绣硝。
數(shù)據(jù)庫(kù)：mysql,oracle,一般都是存放一些關(guān)系型數(shù)據(jù)，表與表之間有關(guān)聯(lián)撑刺。
內(nèi)存：如果放在數(shù)據(jù)庫(kù)或者磁盤(pán)的文件要頻繁的讀取的話鹉胖，不如放在內(nèi)存里面會(huì)提高讀取效率。通常情況下cache也是存放在內(nèi)存里面的够傍。
cookies特定：
1甫菠。http頭部會(huì)帶上cookie信息，顯得臃腫冕屯，影響請(qǐng)求速度寂诱。
2。Cookie的數(shù)據(jù)大小限制只能為4kb數(shù)據(jù)安聘，如果數(shù)據(jù)長(zhǎng)度超過(guò)4kb數(shù)據(jù)痰洒，超過(guò)后的數(shù)據(jù)將返回空字符串。
3浴韭。如果把cookie都存在主域名下丘喻，子域名訪問(wèn)http請(qǐng)求的話都是帶上主域名下的cookie，會(huì)減慢訪問(wèn)速度念颈。
- Cookie是有域的概念的泉粉，在不同的域下，cookie不能互相使用榴芳，cookie對(duì)于那個(gè)域是有效的嗡靡，所有向該域發(fā)送的請(qǐng)求中都會(huì)包含這個(gè)cookie 的信息的，
Cookie是有 有效期概念的翠语，如果想要cookie存儲(chǔ)多長(zhǎng)時(shí)間叽躯，可以設(shè)置cookie的時(shí)間，一般的情況下肌括，cookie的生命周期是在游覽器關(guān)閉的時(shí)候失效点骑，cookie可在瀏覽器關(guān)閉后依然保存在用戶的 機(jī)器上(同一個(gè)瀏覽器，不同的瀏覽器不能保存),如果設(shè)置的日期是過(guò)期的日期谍夭，那么cookie立刻刪掉黑滴。
Cookie路徑的概念：對(duì)于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送cookie紧索，比如我們可以指定cookie只有從http://www.zuixiandao.cn/books/中才能訪問(wèn)袁辈，那么http://www.zuixiandao.cn的頁(yè) 面就不會(huì)發(fā)送cookie信息。
++++++++++++++++++++
sessionStorage 和 localStorage
Html5新增了兩個(gè)本地存儲(chǔ)數(shù)據(jù)珠漂，分別是sessionStorage 和 localStorage.
瀏覽器支持程度如下：
注意：IE8 及 以上都支持 web storage晚缩。
sessionStorage: 將數(shù)據(jù)保存在session對(duì)象中尾膊，所謂session，指用戶瀏覽某個(gè)網(wǎng)站時(shí)荞彼，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉的這段時(shí)間冈敛，也就是用戶瀏覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。
生命周期：指只在當(dāng)前的窗口有效鸣皂，打開(kāi)一個(gè)新的同源窗口抓谴，或者說(shuō)重啟瀏覽器都失效峦耘。
數(shù)據(jù)大小：可以保存5MB甚至更多吸占。
localStorage: 將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備(通常是指硬盤(pán)，但也可以是其他硬件設(shè)備)撰洗，即使瀏覽器被關(guān)閉了荆陆，該數(shù)據(jù)依然存在滩届，下次打開(kāi)瀏覽器訪問(wèn)網(wǎng)站時(shí)仍然可以繼續(xù)使用。但是慎宾，數(shù)據(jù)保存是按不同的瀏覽器分別進(jìn)行的丐吓，也就是說(shuō)，如果打開(kāi)別的瀏覽器趟据，是讀取不到在這個(gè)瀏覽器中保存的數(shù)據(jù)的券犁。
生命周期：數(shù)據(jù)一直保存在硬盤(pán)中。持久性保存(但是不同的瀏覽器保存的數(shù)據(jù)汹碱，是不能通用的)粘衬。
數(shù)據(jù)大小：可以保存5MB甚至更多的數(shù)據(jù)。
cookie 與 sessionStorage 及 localStorage的區(qū)別咳促；
共同點(diǎn)：都是在客戶端存儲(chǔ)數(shù)據(jù)稚新，且是同源的。
區(qū)別：
存儲(chǔ)大小不一樣跪腹；cookie存儲(chǔ)數(shù)據(jù)最大只能為4kb褂删，而sessionStorage與localStorage可以保存5MB甚至更多數(shù)據(jù)。
Cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶冲茸，即cookie在瀏覽器與服務(wù)器之間來(lái)回傳遞屯阀，而sessionStorage與localStorage不會(huì)自動(dòng)發(fā)給服務(wù)端，僅在本地保存轴术。
數(shù)據(jù)有效期不同难衰；sessionStorage僅在當(dāng)前瀏覽器窗口未關(guān)閉之前有效(同源的新窗口不生效)，localStorage僅在當(dāng)前的瀏覽器下永久生效(不同的瀏覽器不能共享數(shù)據(jù))逗栽，不管關(guān)閉了 重新打開(kāi)的 還是生效的盖袭。Cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或者瀏覽器關(guān)閉，或者打開(kāi)新的同源窗口鳄虱。
作用域不同弟塞；sessionStorage不在不同的瀏覽器窗口中共享，即是同一個(gè)頁(yè)面拙已，localStorage在所有的同源窗口（子域之間不能共享數(shù)據(jù)宣肚，不支持改domain，可以用postMassage）中都是共享的(只在相同的瀏覽器下)悠栓，cookie在所有的同源窗口（子域之間可以把各自的domain改成和主域一樣來(lái)實(shí)現(xiàn)共享數(shù)據(jù)）都是共享的(僅在同一個(gè)瀏覽器中)。
SessionStorage與LocalStorage他們都擁有相同的方法按价；
-
setItem存儲(chǔ)value
用法：.setItem( key, value)惭适，代碼如下：
localStorage.setItem(key,value)：將value存儲(chǔ)到key字段 -
getItem獲取value
用法：.getItem(key) 代碼如下：
localStorage.getItem(key):獲取指定key本地存儲(chǔ)的值 -
removeItem刪除key
用法：.removeItem(key)，代碼如下：
localStorage.removeItem(key):刪除指定key本地存儲(chǔ)的值 -
clear清除所有的key/value
用法：.clear()楼镐，代碼如下：
localStorage.clear(); 清除所有的數(shù)據(jù)(firefox除外)
它將刪除所有同源的本地存儲(chǔ)的localStorage數(shù)據(jù)
而對(duì)于Session Storage癞志，它只清空當(dāng)前會(huì)話存儲(chǔ)的數(shù)據(jù)。
sessionStorage也有上面一樣的方法框产；
只要能序列化成字符串就能存在storage里面凄杯，圖片可以用canvas的drawImage嵌入圖片，再用 toDataURL轉(zhuǎn)為路徑字符串存起來(lái)秉宿。如下圖：
手動(dòng)控制localstorage的過(guò)期控制：
indexedDB（以前叫做Web Sql）
雖然Html5已經(jīng)提供了功能強(qiáng)大的localStorage和sessionStorage戒突，但是他們兩個(gè)都只能提供存儲(chǔ)簡(jiǎn)單數(shù)據(jù)結(jié)構(gòu)的數(shù)據(jù)，對(duì)于復(fù)雜的Web應(yīng)用的數(shù)據(jù)卻無(wú)能為力描睦。逆天的是Html5提供了一個(gè)瀏覽器端的數(shù)據(jù)庫(kù)支持膊存，允許我們直接通JS的API在瀏覽器端創(chuàng)建一個(gè)本地的數(shù)據(jù)庫(kù)，而且支持標(biāo)準(zhǔn)的SQL的CRUD操作忱叭，讓離線的Web應(yīng)用更加方便的存儲(chǔ)結(jié)構(gòu)化的數(shù)據(jù)隔崎。
移動(dòng)端支持的比較弱一些，移動(dòng)端主要支持web sql韵丑，但是W3C已經(jīng)不再維護(hù)web sql
詳細(xì)用法參考indexDB筆記
http://www.cnblogs.com/dolphinX/p/3415761.html
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
以下是Web Sql的基本用法和API:
操作本地?cái)?shù)據(jù)庫(kù)的最基本的步驟是：
● 第一步：openDatabase方法：創(chuàng)建一個(gè)訪問(wèn)數(shù)據(jù)庫(kù)的對(duì)象爵卒。
● 第二步：使用第一步創(chuàng)建的數(shù)據(jù)庫(kù)訪問(wèn)對(duì)象來(lái)執(zhí)行transaction方法，通過(guò)此方法可以設(shè)置一個(gè)開(kāi)啟事務(wù)成功的事件響應(yīng)方法撵彻，在事件響應(yīng)方法中可以執(zhí)行SQL.
● 第三步：通過(guò)executeSql方法執(zhí)行查詢钓株，當(dāng)然查詢可以是：CRUD。
接下來(lái)分別介紹一下相關(guān)的方法的參數(shù)和用法千康。
（1）openDatabase方法：
//Demo：獲取或者創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)享幽，如果數(shù)據(jù)庫(kù)不存在那么創(chuàng)建之
var dataBase = openDatabase("student", "1.0", "學(xué)生表", 1024 * 1024, function () { });
openDatabase方法打開(kāi)一個(gè)已經(jīng)存在的數(shù)據(jù)庫(kù)，如果數(shù)據(jù)庫(kù)不存在拾弃，它還可以創(chuàng)建數(shù)據(jù)庫(kù)值桩。幾個(gè)參數(shù)意義分別是：
● 1，數(shù)據(jù)庫(kù)名稱豪椿。
● 2奔坟，數(shù)據(jù)庫(kù)的版本號(hào)携栋，目前來(lái)說(shuō)傳個(gè)1.0就可以了，當(dāng)然可以不填咳秉；
● 3婉支，對(duì)數(shù)據(jù)庫(kù)的描述。
● 4澜建，設(shè)置分配的數(shù)據(jù)庫(kù)的大邢蛲凇（單位是kb）。
● 5炕舵，回調(diào)函數(shù)(可省略)何之。
初次調(diào)用時(shí)創(chuàng)建數(shù)據(jù)庫(kù)，以后就是建立連接了咽筋。
（2）db.transaction方法可以設(shè)置一個(gè)回調(diào)函數(shù)溶推，此函數(shù)可以接受一個(gè)參數(shù)就是我們開(kāi)啟的事務(wù)的對(duì)象。然后通過(guò)此對(duì)象可以進(jìn)行執(zhí)行Sql腳本奸攻，跟下面的步驟可以結(jié)合起來(lái)蒜危。
（3）通過(guò)executeSql方法執(zhí)行查詢。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
參數(shù)說(shuō)明：
● qlQuery：需要具體執(zhí)行的sql語(yǔ)句睹耐，可以是create辐赞、select、update疏橄、delete占拍；
● value1,value2..]：sql語(yǔ)句中所有使用到的參數(shù)的數(shù)組，在executeSql方法中捎迫，將s>語(yǔ)句中所要使用的參數(shù)先用“?”代替晃酒，然后依次將這些參數(shù)組成數(shù)組放在第二個(gè)參數(shù)中
● ataHandler：執(zhí)行成功是調(diào)用的回調(diào)函數(shù)，通過(guò)該函數(shù)可以獲得查詢結(jié)果集窄绒；
● 4,errorHandler：執(zhí)行失敗時(shí)調(diào)用的回調(diào)函數(shù)贝次；
+++++++++++++++++++++++++++++++++++++++++
