JS 客戶端（瀏覽器）存儲數據之 localStorage、sessionStorage和indexDB

基本概念

1、localStorage和sessionStorage是HTML5 Web存儲的提供的兩種存儲方式，在IE7以上以及大多數瀏覽器都是支持的

2、localStorage和sessionStorage的區別：

(1)、localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象。

(2)、他們都是只能存儲字符串類型的對象（雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。

(3)、localStorage生命周期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。（記錄在內存中的）

　　sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被關閉了，那么所有通過sessionStorage存儲的數據也就被清空了（回話性質的儲存）

(4)、不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬於相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。

　　這里需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬於同源頁面，那么他們之間是可以共享sessionStorage的。（同源原則）

3、localStorage和sessionStorage可存儲數據的大小一般為5MB

具體使用

localStorage和sessionStorage使用起來具有相同的API，例如setItem、getItem和removeItem等

存儲的方式以鍵值對的形式（key-value）

 
           
           function testlocalStorage() 
           
           
           { 
           
           
           　　var data="my name is Russ"; 
           
           
           　　localStorage.setItem('name',data);//存儲key為name的數據data 
           
           
           　　localStorage.getItem('name');//獲取key為name的數據--my name is Russ 
           
           
           　　localStorage.removeItem("key");//刪除key為name的數據 
           
           
           　　localStorage.clear()//清空所有localStorage的數據 
           
          
 
           
            　　//保存后台返回的JSON對象型的數據 
           
           
            　　var json_data={ 
           
           
            　　　　a:'1', 
           
           
            　　　　b:'2', 
           
           
            　　　　c:'3' 
           
           
            　　} 
           
           
            　　var dd=JSON.stringify(json_data) 
           
           
            　　//因為目前localStorage保存的數據都是字符串類型的 
           
           
            　　localStorage.setItem('KEY1',dd) 
           
           
            　　//同理獲取的時候字符串轉成json對象 
           
           
            　　var model=JSON.parse(localStorage.getItem('KEY1')) 
           
           
           } 
           
           
           function testlocalStorage() 
           
           
           { 
           
           
            　　var data="my name is Russ"; 
           
           
            　　sessionStorage.setItem('name',data);//存儲key為name的數據data 
           
           
            　　sessionStorage.getItem('name');//獲取key為name的數據--my name is Russ 
           
           
            　　sessionStorage.removeItem("key");//刪除key為name的數據 
           
           
            　　sessionStorage.clear()//清空所有sessionStorage的數據 
           
          
 
          
 
           
            　　//保存后台返回的JSON對象型的數據 
           
           
            　　var json_data={ 
           
           
            　　　　a:'1', 
           
           
            　　　　b:'2', 
           
           
            　　　　c:'3' 
           
           
            　　} 
           
           
            　　var dd=JSON.stringify(json_data) 
           
           
            　　//因為目前sessionStorage保存的數據都是字符串類型的 
           
           
            　　sessionStorage.setItem('KEY1',dd) 
           
           
            　　//同理獲取的時候字符串轉成json對象 
           
           
            　　var model=JSON.parse(sessionStorage.getItem('KEY1')) 
           
           
           } 
           
           
           //sessionStorage和localStorage對應的length屬性以及提供的key方法可以進行遍歷 
           
           
            
             
             function forEachStorage(){ 
             
             
             　　var storage = window.localStorage;//window.sessionStorage 
             
             
             　　for(var i=0, len=storage.length; i<len;i++){ 
             
             
             　　　　var key = storage.key(i);//取到具體key值 
             
             
             　　　　var value = storage.getItem(key); //取對應的value值 
             
             
             　　　　console.log(key + "=" + value); 
             
             
             　　} 
             
             
             } 
             
            
           
         

 indexDB應用於web程序中

相信這個鏈接對我們理解indexDB有很大的幫助（英文的可以借助瀏覽器幫助翻譯一下）

看完后我們進入indexDB在項目中的實際運用