存儲形式：
? ? 一、本地存儲（localstorage&sessionstorage）
? ? 二、離線存儲（application cache）
? ? 三、indexedDB和Web SQL
詳解：
一、本地存儲：
?--localstorage&sessionstorage
1.存儲形式
????--key,value
2.過期
? ? --永久存儲，永不失效，除非手動刪除（sessionStorage關閉瀏覽器就沒了）
3.大小
? ? --官方給出的文檔是，每個域名5M
使用方法
????--localstorage API介紹
????????--getItem （取）
????????--setItem （記錄）
????????--removeItem （移除）
????????--key? （參數是下標，拿某下標上的key值）
????????--clear （全部刪除）
總：只要是可以轉化成字符串的，都可以存儲在localsrorage
二、離線存儲
1.數組：需要序列化為字符串存入
2.json數據：parse.stringify成字符串可以存入
3.圖片:Canvas的toDataURL(image/*)之后變成base64～～一堆編碼字符串
4.腳本：ajax-response 拉回來
5.樣式文件：同上
使用限制：
子域名之間不能共享存儲數據，這是可以使用h5的postmessage來發送信息,超出存儲大小之后如何存儲(LRU，FIFO)
案例1：存儲圖片到localstorage
場景：圖片基本不更改，在用戶第二次訪問的時候希望用戶馬上看到，就可以把圖片存到localstorage里面，如果圖片的base64（canvas生成）特別大的話，會比較費localstorage的資源。canvas有一個安全策略，如果圖片和請求的域名不在同一個域下，會報一個安全的策略，這時候需要給圖片服務器加一個Access-Control-Allow-Origin，從而保證圖片可以跨域.
使用本地存儲注意事項：
????1.使用前要判斷瀏覽器是否支持（在實際情況中，有一些移動端的瀏覽器，比如ios,如果打開了無痕模式，這個時候沒法使用localstorage,還有一些瀏覽器，你可以訪問到localsttorage的對象，但是存儲的時候報錯，所以網上很多給出判斷瀏覽器是否支持用的是window.localstorage，這種方法其實不是不太健全的，建議大家在判斷是否支持的時候可以先去set一次，然后把這個set異常捕獲，如果捕獲到異常的話，說明瀏覽器不支持。）
????2.寫數據的時候，需要異常處理，避免超出容量拋錯（它本身只有5M存儲空間，如果不去做這樣的異常處理，超出容量會報異常）
????3.避免把敏感信息存入localstorage
????4.key的唯一性（如果重復set的話會把新的值覆蓋到之前的）
使用場景：
????1.利用本地數據，減少網絡傳輸（腳本，樣式文件本地化，這樣下次訪問的時候，更流暢）
????2.弱網絡環境下，高延遲，低寬帶，盡量把數據本地化
varsrc='e.png'
functionset(key){
varimg=document.createElement('img')
//當圖片加載完成的時候觸發回調函數
img.addEventListener('load',function(){
varimgCanvas=document.createElement('canvas')
imgContext=imgCanvas.getContext('2d')
//確保canvas元素的大小和圖片尺寸一致
imgCanvas.width=this.width
imgCanvas.height=this.height
//渲染圖片到canvas中
imgContext.drawImage(this,0,0,this.width,this.height)
//用data url形式取出imgAsDataURL就是一個base64字符串
varimgAsDataURL=imgCanvas.toDataURL('image/png')
//保存到本地存儲中，做一下錯誤處理，以免有的瀏覽器不支持
try{
localStorage.setItem(key,imgAsDataURL)
}
catch(e){
console.log('storage failed'+e)
}
},false)
img.src=src
}
functionget(key){//從本地緩存獲取圖片并且渲染
varsrcStr=localStorage.getItem(key)
varimgObj=document.createElement('img')
imgObj.src=srcStr
document.body.appendChild(imgObj)
}
set('imgdata')
get('imgdata')
三、indexedDB和Web SQL
?????indexedDB database：Web SQL微軟已經不支持了，雖然indexedDB支持率比較弱?，但是也得學習。。它是一種能在瀏覽器中持久地存儲結構化數據的數據庫，并且為web應用提供了豐富的查詢能力
下面來詳細學習一下indexedDB：
算了，好像用的比較少，時間緊迫，不學了。。。
