跨文件資訊傳遞之localStorage本地儲存

2021-07-07 09:29:28 字數 2589 閱讀 3815



2011-12-29 15:51| 發布者: admin

| 檢視: 5515

摘要: cookie在web中得到廣泛應用,但侷限性非常明顯,容量太小,有些站點會因為出於安全的考慮而禁用cookie,cookie沒有想象中的那麼安全。 flash sharedobject使 用的是kissy的store模組來呼叫flash sharedobject。flash ...

cookie在web中得到廣泛應用,但侷限性非常明顯,容量太小,有些站點會因為出於安全的考慮而禁用cookie,cookie沒有想象中的那麼安全。

flash sharedobject使 用的是kissy的store模組來呼叫flash sharedobject。flash sharedobject的優點是容量適中,基本上不存在相容性問題,缺點是要在頁面中引入特定的swf和js檔案,增加額外負擔,處理繁瑣;還是有部分 機子沒有flash執行環境。

google gearsgoogle的離線方案,已經停止更新,官方推薦使用html5的localstorage方案。

user dataie的早期版本的本地儲存方案,看上去有點怪異

相對於上述本地儲存方案,localstorage有自身的優點:容量大、易用、強大、原生支援;

缺點是相容性差些(主要是ie8以下版本不支援)、安全性也差些(所以請勿使用localstorage儲存敏感資訊)。

localstorage的api

非常通俗易懂的介面

留意localstorage儲存的值都是字串型別,在處理複雜的資料時,比如json資料時,需要借助json類,將json字串轉換成真正可用的json格式,localstorage第二個實戰教程會重點演示相關功能。

localstorage還提供了乙個storage事件,在儲存的值改變後觸發,比如下面**:

if (window.addeventlistener)  else if (window.attachevent) 

function storagehandler(ev)

console.log('改變的字段是'+ev.key);

console.log('舊的值是'+ev.oldvalue);

console.log('新的值是'+ev.newvalue);

}

以下是利用localstorage實現跨文件資料傳遞的例項:

頁面主體部分:

<

article

>

<

section

>

<

p><

strong

>說明:

strong

>在兩個以上視窗或新標籤頁中開啟此頁面並在其中一視窗中輸入資訊並按回車,訊息會即時傳遞其它視窗中

p>

<

p>本頁面通過html5中的<

code

>localstorage

code

>方法實現跨文件資料傳遞.

p>

<

div>

<

p><

label

for="data"

>輸入測試內容

label

>

<

input

type

="text"

name

="data"

value

=""placeholder

="change me"

id="data"

/>

<

small

>(按回車,你的輸入只能顯示於<

em>其它

em>視窗)

small

>

p>

="fromevent"

>等待從其它視窗傳送的容……

p>

div>

section

>

article

>

js實現**:

var datainput = document.getelementbyid('data'),

output = document.getelementbyid('fromevent');

addevent(window, 'storage', function (event)

});addevent(datainput, 'keyup', function () );

自己動手試一試:

說明:在兩個以上視窗或新標籤頁中開啟此頁面並在其中一視窗中輸入資訊並按回車,訊息會即時傳遞其它視窗中

本頁面通過html5中的localstorage方法實現跨文件資料傳遞.

輸入測試內容

(按回車,你的輸入只能顯示於其它視窗)

等待從其它視窗傳送的容……

html5+

css3技術中文網|

html5跨文件訊息傳遞(可實現跨域)

跨文件訊息傳送 cross document messaging 簡稱xdm,指的是來自不同域的頁面間傳遞訊息。xdm的核心是postmessage 方法。目的 向另乙個地方傳遞資料。對於xdm而言,另乙個地方 指的是包含在當前頁面中的元素,或者由當前頁面彈出的視窗。postmessage 方法接收...

前端跨域技術之跨文件訊息傳輸

跨文件訊息傳送,簡稱為xdm,指的是來自不同的域的頁面間的傳遞訊息。如果兩個網頁不同源,就無法拿到對方的 dom。典型的例子是 iframe 視窗和window.open 方法開啟的視窗,它們與父視窗無法通訊。比如,父視窗執行下面的命令,如果 iframe 視窗不是同源將會報錯。document.g...

Spring之跨重定向請求傳遞資料

在開發場景中,大部分資料都是使用請求 forward 進行傳遞,而使用重定向 redirect 傳遞資料可能比較少。那麼問題來了 請求中的資料生命週期存活時間只在乙個請求 request 中,當這個請求結束後,那麼請求中所帶的資料也會隨著這個請求一起拜拜了。而重定向會向伺服器發起兩個請求,所以第乙個...