DOM Storage 是設計取代 cookie,提供多量,安全,好用的資訊存儲方法。目標是達成互動式應用。例如 IE 的 cookie 最多可有 4K 位元組,而每一個 Storage 區可有 10 mega 位元組。
IE8, Firefox, Safari 有支援此功能。下面在不同瀏覽器測試,結果並不統一。讀者可以視情況使用。
這三個物件是全域物件,使用 window.sessionStorage 或 sessionStorage 都可以。
此為標準的介面(interface),用於 globalStorage, localStorage, sessionStorage 物件。可以使用 prototype 增加所有 Storage 物件的成員。
- 程式用法:
<script type='text/javascript'>
document.write( Storage +'<br />');
Storage.prototype.bike='賽車遊戲';
document.write( sessionStorage.bike +'<br />');
document.write( globalStorage['ant4js.blogspot.com'].bike +'<br />');
Storage.prototype.prt =
function ( s ) { document.write( s ) };
sessionStorage.prt('我很好');
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagerd.html'>跳至測試頁</a>,看看可不可以讀到。 - 執行結果:
function Storage() { [native code] }
賽車遊戲
跳至測試頁,看看可不可以讀到。
- 上例,Firefox 成功;IE6, Safari, Chrome 失敗。
- 在 Firefox 可以用 prototype 增加所有 Storage 物件的成員,但是只限當下網頁使用,跳到其它頁就讀不到了。
使用此存放的資料可以在不同視窗讀寫,但是限同一網站的任一網頁;視窗關閉後,資料依然可以保留在客戶電腦。限 Firefox 使用。其語法是:
globalStorage['網址'].特徵名 = 值
網址例如 ant4js.blogspot.com。值必須是字串,所有的數值都必須轉換成字串。
- 程式用法:
<script type='text/javascript'>
document.write( globalStorage +'<br />');
globalStorage['ant4js.blogspot.com'].Game='射擊遊戲';
document.write( globalStorage['ant4js.blogspot.com'].Game );
</script>
<p>在另一個視窗開此頁 http://ant4js.blogspot.com/2009/02/storagerd.html ,看看可不可以讀到。 - 執行結果:
[object HTMLDivElement]
在另一個視窗開此頁 http://ant4js.blogspot.com/2009/02/storagerd.html ,看看可不可以讀到。
- 上例,Firefox 成功的在其它網頁讀到儲存資料;IE6, Safari, Chrome 失敗。
使用此存放的資料可以在不同視窗讀寫,但是限同一網站的任一網頁;視窗關閉後,資料依然可以保留在客戶電腦。此為標準組織建議的物件,Firefox 無此項,其使用 globalStorage。其語法是:
localStorage.特徵名 = 值
值必須是字串,所有的數值都必須轉換成字串。
- 程式用法:
<script type='text/javascript'>
document.write( localStorage +'<br />');
localStorage.Jolin='蔡依林';
document.write( localStorage.Jolin );
</script>
<p>在另一個視窗開此頁 http://ant4js.blogspot.com/2009/02/storagerd.html ,看看可不可以讀到。 - 執行結果:
[object Storage]
蔡依林在另一個視窗開此頁 http://ant4js.blogspot.com/2009/02/storagerd.html ,看看可不可以讀到。
- 上例,IE6, Firefox, Safari, Chrome 都失敗。
此物件是要改善資訊片(cookie)會被多個視窗讀取的情形。例如用戶對同一網站開了兩三個瀏覽器視窗,此時用戶在其中一個視窗運作,產生的資訊片,其它視窗都可以讀取;這有可能導致用戶在購物網站重複購買相同的商品而未察覺。使用 sessionStorage 存放的資訊,只有同一視窗中同一網站的任一網頁可以讀取;視窗關閉時,存放的資料會被刪去。其語法是:
sessionStorage.特徵名 = 值
值必須是字串,所有的數值都必須轉換成字串。
- 程式用法:
<script type='text/javascript'>
document.write( sessionStorage +'<br />');
sessionStorage.JAY='周杰倫';
document.write( sessionStorage.JAY );
</script>
<p><a href='http://ant4js.blogspot.com/2009/02/storagerd.html'>跳至測試頁</a>,看看可不可以讀到。 - 執行結果:
[object Storage]
周杰倫跳至測試頁,看看可不可以讀到。
- 上例,Firefox 成功的在其它網頁讀到儲存資料;IE6, Safari, Chrome 失敗。
- 在 Firefox 測試時發現,子視窗可以讀到父視窗的 sessionStorage 資料。