H5本地存儲一

時間 2020-07-11

標籤 h5 本地存儲简体版

原文原文鏈接

localStorage（本地存儲）,能夠長期存儲數據，沒有時間限制，一天，一年，兩年甚至更長，數據均可以使用。sessionStorage（會話存儲），只有在瀏覽器被關閉以前使用，建立另外一個頁面時贊成可使用，關閉瀏覽器以後數據就會消失。html

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。咱們這裏以 localStorage 爲例，簡要介紹下 HTML5 的本地存儲，並針對如遍歷等常見問題做一些示例說明。 localStorage 是 HTML5 本地存儲的 API，使用鍵值對的方式進行存取數據，存取的數據只能是字符串。不一樣瀏覽器對該 API 支持狀況有所差別，如使用方法、最大存儲空間等。java

1、localStorage API 基本使用方法chrome

localStorage API 使用方法簡單易懂，以下爲常見的 API 操做及示例：設置數據：localStorage.setItem(key,value); 示例：瀏覽器

for(var i=0; i<10; i++){
 localStorage.setItem(i,i);
}

獲取數據：localStorage.getItem(key) 獲取所有數據：localStorage.valueOf() 示例：session

for(var i=0; i<10; i++){
 localStorage.getItem(i);
}

刪除數據：localStorage.removeItem(key) 示例：
測試

for(var i=0; i<5; i++){
 localStorage.removeItem(i);
}

清空所有數據：localStorage.clear() 獲取本地存儲數據數量：localStorage.length 獲取第 N 個數據的 key 鍵值：localStorage.key(N)spa

2. 遍歷 key 鍵值方法firefox

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

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

3.1 數據存儲大小限制測試htm

不一樣瀏覽器對 HTML5 的本地存儲大小基本均有限制，一個測試的結果以下：

IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome  28.0  > 2621435 + 5 = 2621440
safari  5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M （超出則會彈出容許請求更多空間的對話框）

測試代碼參考：

<!DOCTYPE html>
<html>
<head>
<script>
 function log( msg ) {
     console.log(msg);
     alert(msg);
 }</p>
<p> var limit;
 var half = '1'; //這裏會換成中文再跑一遍
 var str = half;
 var sstr;
 while ( 1 ) {
     try {
         localStorage.clear();
         str += half;
         localStorage.setItem( 'cache', str );
         half = str;
     } catch ( ex ) {
         break;
     }
 }
 var base = str.length;
 var off = base / 2;
 var isLeft = 1;
 while ( off ) {
     if ( isLeft ) {
         end = base - (off / 2);
     } else {
         end = base + (off / 2);
     }</p>
<p>     sstr = str.slice( 0, end );
     localStorage.clear();
     try {
         localStorage.setItem( 'cache', sstr );
         limit = sstr.length;
         isLeft = 0;
     } catch ( e ) {
         isLeft = 1;
     }</p>
<p>     base = end;
     off = Math.floor( off / 2 );
 }</p>
<p> log( 'limit: ' + limit );
</script>
</html>

3.2 數據存儲異常處理

try{
 localStorage.setItem(key,value);
}catch(oException){
 if(oException.name == 'QuotaExceededError'){
  console.log('超出本地存儲限額！');
  //若是歷史信息不重要了，可清空後再設置
  localStorage.clear();
  localStorage.setItem(key,value);
 }
}

總結：

H5的兩種存儲技術的最大區別就是生命週期。localStorage是本地存儲，存儲期限不限；sessionStorage會話存儲，頁面關閉數據就會丟失。

使用方法：

localStorage.setItem（「key」，「value」）//存儲

localStorage.getItem（key）//按key進行取值

localStorage.valueOf( )//獲取所有值

localStorage.removeItem(key)//刪除單個值

localStorage.clear()//刪除所有數據

localStorage.length//得到數據的數量

localStorage.key(N)//得到第N個數據的key值

注：localStorage和sessionStorage用法相同