HTML5本機儲存localStorage、sessionStorage基本用法、遍歷操作、異常處理等_html5教學技巧

HTML5 的本機儲存 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，差異在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直儲存。我們在這裡以 localStorage 為例，簡要介紹下 HTML5 的本地存儲，並針對如遍歷等常見問題作一些示例說明。 localStorage 是 HTML5 本機儲存的 API，使用鍵值對的方式進行存取數據，存取的資料只能是字串。不同瀏覽器對此 API 支援情況有所差異，如使用方法、最大儲存空間等。

一、localStorage API 基本使用方法

localStorage API 使用方法簡單易懂，如下為常見的API 操作及範例： 設定資料：localStorage.setItem(key,value); 範例：

複製程式碼

程式碼如下:

for(var i=0; i localStorage.setItem(i,i) ;
}

取得資料：localStorage.getItem(key) 取得完整資料：localStorage.valueOf() 範例：

程式碼程式碼如下:

for(var i=0; i localStorage.getItem(i);
}
刪除資料：localStorage.removeItem(key) 範例：

複製程式碼

複製程式碼

複製程式碼

複製程式碼🎜>for(var i=0; i localStorage.removeItem(i);
}
清空全部資料：localStorage.clear() 取得本地儲存資料數量：localStorage.length 取得第N 個資料的key 鍵值：localStorage.key(N)

2. 遍歷key 鍵值方法

複製代碼

代碼如下:

for(var i=localStorage.length - 1 ; i >=0; i--){ console.log('第' (i 1) '條資料的鍵值為：' localStorage.key(i) '，資料為：' localStorage.getItem(localStorage.key(i)));}

3. 儲存大小限制測試及異常處理

3.1 資料儲存大小限制檢定 不同瀏覽器對HTML5 的本地儲存大小基本上都有限制，一個測試的結果如下：

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

代碼如下:

IE 9 > 4999995 5 = 5000000
firefox 22.0 > 5242875 5 = 5242880
28.0535750505035 50350351505135135051351505> > 2621435 5 = 2621440
opera 12.15 > 5M （超出則會彈出允許請求更多空間的對話框）





測試程式碼參考：






複製代碼


代碼如下:


br />



<script><br /> function log( msg ) {<br /> console.log(msg);<br /> alert(msg);<br /> } <p> var limit;<br /> var half = '1'; //這裡會換成中文再跑一次<br /> var str = half;<br /> var sstr;<br /> while ( 1 ) {<br /> try {<br /> localStorage.clear();<br /> str = half;<br /> localStorage.setItem( 'cache', str );<br /> half = str;<br /> } catch ( ex ) {<atch ( 🎜> break;<br /> }<br /> }</script>

var base = str.length; var off = base / 2; var isLeft = 1; while ( off ) { if ( isLeft ) { end = base - (off / 2); } else { end = base (off / 2); }

sstr = str.slice( 0, end ); localStorage.clear(); try { localStorage.setItem( 'cache', sstr ); limit = sstr.length ; isLeft = 0; } catch ( e ) { isLeft = 1; }

base = end; off = Math.floor( off / 2 ); }

log( 'limit: ' limit );

3.2 データストレージ例外処理

コードをコピー

コードは次のとおりです:

try{
localStorage .setItem( key, value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('ローカル ストレージの制限を超えました!');
// 履歴情報が重要でなくなった場合は、履歴情報をクリアしてから再度設定できます
localStorage.clear();
localStorage.setItem(key, value);
}
}