通過代碼示例跟我學html5相關技術——html5本地存儲技術及應用實例-在線瀏覽
2025-01-17 07:40本頁面
【正文】 存儲 API HTML5 為本地存儲提供了一套 API （ 1）本地存儲 API 的主要作用 通過該組 API，開發(fā)人員可以將信息存儲在訪問者的計算機上，而且該信息可以隨時在 HTML 頁面中訪問（甚至在頁面被呈現(xiàn)之后），并且不會隨著每次 HTTP 請求而被自動加載，存儲的容量可以多達 5MB。 （ 2）本地存儲 API 中的主要對象 在 HTML5 中實現(xiàn)本地存儲，可以應 用 window 對象中的 localStorage 和 sessionStorage成員屬性變量。 因此 sessionStorage 不是一種持久化的本地存儲，僅僅是會話級別的存儲 —— 可以實現(xiàn)在線狀態(tài)的跟蹤。 （ 2） localStorage 用于持久化的本地存儲 由于瀏覽器不能刪除通過 localStorage 創(chuàng)建的本地數(shù)據(jù)，除非用戶主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的 —— 可以實現(xiàn)離線狀態(tài)的跟蹤，因為當網頁下次被打開的時候，頁面中的相關控制程序仍然可以訪問上次打開該網頁時存儲的數(shù)據(jù)。但同樣由于存儲在本地的數(shù) 據(jù)是未加密的、而且永遠不會過期，因此極易造成隱私泄漏。 （ 1）存儲空間更大和不受頁面刷新的影響 在 IE8 中每個獨立的存儲空間為 10M，其他瀏覽器實現(xiàn)略有不同，但都比 Cookie 要大很多。而 HTML5 中的本地存儲中的數(shù)據(jù)則僅僅是存在本地，不會與服 務器發(fā)生任何交互，因此可以應用本地存儲相關的技術實現(xiàn)在客戶端的不同頁面相互傳遞參數(shù) —— 在跳轉源頁面中將跳轉參數(shù)存儲起來，然后再在跳轉的目標頁中將剛才存儲的參數(shù)取出來使用。 （ 4）獨立的存儲空間 每個域（包括子域）在客戶端系統(tǒng)中有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數(shù)據(jù)混亂。 （ 2）檢測瀏覽器是否支持本地存儲的代碼示例 if((39。 in window) amp。 window[39。] !== null){ alert(39。)。瀏覽器不支持本地存儲 localStorage 技術 39。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 5/13 頁 5 本地數(shù)據(jù)存儲 實現(xiàn)示例 如何實現(xiàn)本地數(shù)據(jù)存儲（方法之一） （ 1）直 接給 window 對象內的 localStorage 成員屬性再添加子成員屬性 對本地存儲中所產生的數(shù)據(jù)的讀取、寫、刪除操作都很簡單，因為數(shù)據(jù)都是以“鍵 值”對的方式存儲的。代碼示例： =1。 或者 [someOneDataName]=1。 由于在本地存儲中的每個數(shù)據(jù)都必須要有一個唯一的鍵名（ key），不允許存在同名的鍵。 （ 2）如何讀取本地存儲的數(shù)據(jù) var someOneDataValue = 。 如何實現(xiàn)本地數(shù)據(jù)存儲（方法之二） （ 1）應用 localStorage 對象中的 getItem()、 setItem()和 removeItem()函數(shù)操作本地存儲的數(shù)據(jù) （ 2） getItem()獲得指定名稱的數(shù)據(jù)值 如果要取值的 key 不 存 在 將 返 回 null ， 如 代 碼 示 例 ： var keyValue= (keyName)。如代碼示例： (keyName , keyValue)。如下的代碼示例： (39。)。 （ 5）本地存儲中的數(shù)據(jù)只能為字符串類型 由于目前通過 localStorage 對象中的 getItem()、 setItem()函數(shù)所實現(xiàn)的本地存儲中的數(shù)據(jù)只能為字符串類型，盡管 setItem(key,value)函數(shù)中的 value 的數(shù)據(jù)類型在理論上可以是任意類型，不過實際上瀏覽器會調用 value 中的 toString()函數(shù)獲取其字符串值并存儲到本地。 應用 HTML5 本地存儲技術實現(xiàn)的頁面訪問計數(shù)器的應用示例 （ 1）頁面示例 !DOCTYPE html html head meta equiv=ContentType content=text/html。 } /** 必須要應用 parseInt 函數(shù)進行格式轉換獲得具體的數(shù)據(jù)值 ，因為 HTML5 本地存儲只能存字符串，任何格式存儲的時候都會被自動轉為字符串，所以讀取的時候，需要自己進行類型的轉換。 (showVisitCounterTagID).innerHTML = 本頁面已經被訪問了 + +次 。 （ 2）本地存儲中的數(shù)據(jù)對同源的頁面文檔具有可見性 由于瀏覽器的同源策略，網絡連接的跨域訪問是不被允許的。 因此，如果在同一臺客戶端機器中打開兩個 G
黨政相關相關推薦
鄂ICP備17016276號-1