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

3-Web存儲

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

sessionStorage庫Web存儲

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