通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5本地存儲技術(shù)及應(yīng)用實(shí)例-資料下載頁
【導(dǎo)讀】Web頁面稍后讀取此信息。雖然Cookie對于存儲基礎(chǔ)數(shù)據(jù)非常有用，但是它們受到以下。2)另外，Cookie在每次HTTP請求時(shí)都發(fā)送到Web服務(wù)器，這是一種資源浪費(fèi)。1)最簡單而且兼容性最佳的方案是Cookie，但是Cookie在具體應(yīng)用時(shí)存在許多問題；數(shù)據(jù)，userData的缺點(diǎn)顯而易見，它不是Web標(biāo)準(zhǔn)的一部分；3)在Firefox下可以使用globalStorage；4)在有Flash插件的環(huán)境中可以使用Flash中的FlashSharedObject；，具體由window對象中的sessionStorage. 與localStorage兩個(gè)對象體現(xiàn)。加載，存儲的容量可以多達(dá)5MB。該規(guī)范包括同源限制，這樣可以防止Web站點(diǎn)讀取或。比如關(guān)閉瀏覽器窗口后導(dǎo)致會話結(jié)束，sessionStorage也就會被銷毀。在線狀態(tài)的跟蹤。但由于基于安全性的考慮，所有瀏覽器下的session數(shù)據(jù)都是不允許跨域。訪問的，包括跨子域也是不允許的。面中的相關(guān)控制程序仍然可以訪問上次打開該網(wǎng)頁時(shí)存儲的數(shù)據(jù)。與傳統(tǒng)的Cookie技術(shù)相比，HTML5中的本地存儲有許多的優(yōu)點(diǎn)。本地的數(shù)據(jù)是未加密的、而且永遠(yuǎn)不會過期，因此極易造成隱私泄漏。獨(dú)立的，因此不會造成數(shù)據(jù)混亂。對localStorage和sessionStorage成員屬性變量的使用完全相同。
【正文】 ocalStorage 對象中的 key(index)獲得相應(yīng)的鍵 localStorage 對象除了包含有前面所提及的 getItem()、 setItem()和 removeItem()等函數(shù)之外，也還包含如下的成員屬性和成員函數(shù)。 （ 1） length 屬性 返回存儲在 localStorage 對象中的鍵值對的個(gè)數(shù)。 （ 2） key(index)函數(shù)返回相應(yīng)的鍵名 應(yīng)用 localStorage 對象中的 key(index)函數(shù)可以在不了解 localStorage 對象中有哪些鍵值對時(shí)使用，由于 key(index)函數(shù)可以獲得指定順序號的鍵名，因此只要再應(yīng)用 getItem()函數(shù)也就能夠獲得相關(guān)的屬性值。 for(var index=0。index。index++){ ((index)+ : + ((index)) + br)。 } 監(jiān)聽本地存儲中的數(shù)據(jù)存儲事件 通過本地存儲中的數(shù)據(jù)存儲事件可以 監(jiān)聽本地存儲中的數(shù)據(jù)內(nèi)容的改變狀況，從而對數(shù)據(jù)的改變產(chǎn)生相關(guān)的及時(shí)響應(yīng) —— 觀察者模型的事件，但存儲事件只有在存儲的內(nèi)容真正發(fā)生變化時(shí)才會被觸發(fā)。 （ 1）本地存儲事件對象中的相關(guān)成員屬性 1) key：返回發(fā)生改變的 key 值； 2) oldValue：返回發(fā)生改變 key 值以前的 value 值； 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/13 頁 12 3) newValue：返回發(fā)生改變 key 值新的 value 值； 4) url：發(fā)生改變的 url 地址； 5) storageArea：返回發(fā)生改變的 Storage 對象 （ 2）代碼示例 為了監(jiān)聽 storage 事件，需要檢測瀏覽器支持哪種事件機(jī)制（ if () { (storage, handle_storage, false)。 } else { (onstorage, handle_storage)。 } = function (e) { var row = 39。tr39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + ( == localStorage) + 39。/td/tr39。 (row)。 } 或者： (39。storage39。, function(e) { var row = 39。tr39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + + 39。/td39。 row += 39。td39。 + ( == localStorage) + 39。/td/tr39。 (row)。 },false)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/13 頁 13 但沒有看到結(jié)果！個(gè)人猜測是瀏覽器對存儲事件監(jiān)聽的實(shí)現(xiàn)還不完善。 應(yīng)用 JSon 實(shí)現(xiàn)存儲自定義的數(shù)據(jù)類型對象 （ 1）應(yīng)用 ()函數(shù)將 JS 對象轉(zhuǎn)換為 JSon 字符串 var someOneObject = new Object。 = 39。張三 39。 someOneObject. personEmail = 39。 someOneObject. personTelphone = 39。0101234567839。 var jsonString = (someOneObject)。 (39。personKey39。, jsonString)。 在應(yīng)用在直接保存 JSon 字符串，然后再在另一個(gè)頁面在讀出 JSon 字符串，并轉(zhuǎn)換回原始的 JS 對象。 （ 2）應(yīng)用 ()將 JSon 字符串轉(zhuǎn)換為 JS 對象 var jsonString = (39。personKey39。)。 var someOneObject = (jsonString)。
鄂ICP備17016276號-1