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在项目中的实际运用