2015秋前端開(kāi)發(fā)課件js app03web存儲(chǔ)

3-Web存儲(chǔ)

Cookies,Local和Session存儲(chǔ)2015Spring,xi'an本章內(nèi)容CookiesSessionStorageLocalStoragelocalStorage庫(kù)和

sessionStorage庫(kù)Web存儲(chǔ)

Cookies,Local和SessionWeb存儲(chǔ)WebStorageWeb存儲(chǔ)是存儲(chǔ)數(shù)據(jù)的方式保存用戶設(shè)置，故下次打開(kāi)應(yīng)用程序時(shí)，可以加載這些設(shè)置Web存儲(chǔ)的三種常用類(lèi)型Cookies-只通過(guò)單一文檔可訪問(wèn)localStorage-只通過(guò)單一文檔可訪問(wèn)sessionStorage-只當(dāng)文檔打開(kāi)時(shí)可訪問(wèn)CookiesCookiesCookies是小塊數(shù)據(jù)可從具體的應(yīng)用訪問(wèn)存儲(chǔ)在用戶的瀏覽器中如不同瀏覽器的不同cookiesCookies只能存成純文本Cookies(2)Cookies用于保存一些用戶選項(xiàng)和配置的狀態(tài)如果已經(jīng)認(rèn)證到服務(wù)器一次，并不需要再次認(rèn)證Cookies附著于每個(gè)至服務(wù)器的HTTP請(qǐng)求的頭部Cookies可讀取和設(shè)置通過(guò)JavaScriptCookies(3)Cookies由三部分組成名-值對(duì)，保存了Cookies信息期滿日期，Cookies在該時(shí)間后無(wú)效Cookies所屬的域名和到服務(wù)器的路徑，Cookies(4)名-值對(duì)存儲(chǔ)了Cookies的數(shù)據(jù)名稱用于訪問(wèn)值中存儲(chǔ)的數(shù)據(jù)讀取Cookies，必須搜索名稱期滿日期用于給定Cookies工作的時(shí)間表如果不設(shè)置，Cookies在關(guān)閉瀏覽器時(shí)刪除為了制作永久Cookies，設(shè)置足夠年份的期滿日期n運(yùn)行CookiesCookies可用JavaScript訪問(wèn)使用document.cookie屬性盡管Cookies不是字符串，但其用起來(lái)像字符串//setsacookiedocument.cookie='c1=cookie1;expires=Thu,30Apr201321:44:00UTC;path=/'//setsanothercookiedocument.cookie='c2=cookie2;expires=Tue,29Apr201311:11:11UTC;path=/'//readsallcookiesconsole.log(document.cookie);運(yùn)行Cookies讀取cookiefunctionreadCookie(name){varallCookies=document.cookie.split(";");for(vari=0;i<allCookies.length;i++){varcookie=allCookies[i];vartrailingZeros=0;for(varj=0;j<cookie.length;j++){if(cookie[j]!==""){break;}}cookie=cookie.substring(j);if(cookie.startsWith(name+"=")){returncookie;}}}Cookies演示localStoragelocalStorage是每個(gè)文檔的存儲(chǔ)可通過(guò)document.localStorage訪問(wèn)與Cookies相似可存儲(chǔ)大量數(shù)據(jù)支持到IE8需要IE7的庫(kù)保存數(shù)據(jù)以字符串localStorage屬性setItem(key,value),getItem(key)removeItem(key),length本地存儲(chǔ)示例本地存儲(chǔ)同樣有functionsaveState(text){localStorage["text"]=text;}functionrestoreState(){returnlocalStorage["text"];}functionsaveState(text){localStorage.setValue("text",text);}functionrestoreState(){returnlocalStorage.getValue("text");}localStorage演示Session存儲(chǔ)Session存儲(chǔ)與localStorage相似瀏覽器開(kāi)啟則持續(xù)在新的窗體或標(biāo)簽頁(yè)中打開(kāi)頁(yè)面則新建Session適合敏感數(shù)據(jù)（如銀行的Session）只能存儲(chǔ)字符串Session存儲(chǔ)示例Session存儲(chǔ)functionincrementLoads(){if(!sessionStorage.counter){sessionStorage.setItem("counter",0);}varcurrentCount=parseInt(sessionStorage.getItem("counter"));currentCount++;sessionStorage.setItem("counter",currentCount;document.getElementById("countDiv").innerHTML=currentCount;}sessionStorage存儲(chǔ)演示在WebStorage中保存對(duì)象Local和Session存儲(chǔ)只能包含字符串如果想存儲(chǔ)對(duì)象，需要調(diào)用toString()方法存儲(chǔ)對(duì)象到Web存儲(chǔ)中，需要擴(kuò)展存儲(chǔ)原型Stotype.setObject=functionsetObject(key,obj){this.setItem(key,JSON.stringify(obj));};Stotype.getObject=functiongetObject(key){returnJSON.parse(this.getItem(key));};在WebStorage中存儲(chǔ)對(duì)象演示提問(wèn)環(huán)節(jié)練習(xí)創(chuàng)造簡(jiǎn)單數(shù)字猜謎游戲計(jì)算機(jī)創(chuàng)建隨機(jī)數(shù)用四個(gè)不同數(shù)字最左數(shù)字必須不能為0簡(jiǎn)稱abcd每輪玩家輸入四位數(shù)進(jìn)程xyzw當(dāng)游戲結(jié)束：詢問(wèn)玩家昵稱保存昵稱到localStorage中實(shí)現(xiàn)高分列表練習(xí)（續(xù)）創(chuàng)造簡(jiǎn)單數(shù)字猜