首頁 >web前端 >H5教程 >HTML5本機儲存localStorage、sessionStorage基本用法、遍歷操作、異常處理等_html5教學技巧

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

WBOY
WBOY原創
2016-05-16 15:47:582003瀏覽

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);
}
}
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn