cookies，sessionStorage 和 localStorage 的區(qū)別？

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開(kāi)的不同窗口，即使是同一頁(yè)面，sessionStorage對(duì)象也是不同的。

Web Storage帶來(lái)的好處：

1.減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地后，就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請(qǐng)求，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞。
　　2.快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過(guò)網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，本地?cái)?shù)據(jù)可以即時(shí)獲得。再加上網(wǎng)頁(yè)本身也可以有緩存，因此整個(gè)頁(yè)面和數(shù)據(jù)都在本地的話，可以立即顯示。
　　3.臨時(shí)存儲(chǔ)：很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁(yè)面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便。

瀏覽器本地存儲(chǔ)與服務(wù)器端存儲(chǔ)之間的區(qū)別

其實(shí)數(shù)據(jù)既可以在瀏覽器本地存儲(chǔ)，也可以在服務(wù)器端存儲(chǔ)。
　　瀏覽器端可以保存一些數(shù)據(jù)，需要的時(shí)候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)。

服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)，但需要的時(shí)候?yàn)g覽器要向服務(wù)器請(qǐng)求數(shù)據(jù)。
　　1.服務(wù)器端可以保存用戶的持久數(shù)據(jù)，如數(shù)據(jù)庫(kù)和云存儲(chǔ)將用戶的大量數(shù)據(jù)保存在服務(wù)器端。
　　2.服務(wù)器端也可以保存用戶的臨時(shí)會(huì)話數(shù)據(jù)。服務(wù)器端的session機(jī)制，如jsp的 session 對(duì)象，數(shù)據(jù)保存在服務(wù)器上。實(shí)現(xiàn)上，服務(wù)器和瀏覽器之間僅需傳遞session id即可，服務(wù)器根據(jù)session id找到對(duì)應(yīng)用戶的session對(duì)象。會(huì)話數(shù)據(jù)僅在一段時(shí)間內(nèi)有效，這個(gè)時(shí)間就是server端設(shè)置的session有效期。

服務(wù)器端保存所有的用戶的數(shù)據(jù)，所以服務(wù)器端的開(kāi)銷較大，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。
瀏覽器端一般只用來(lái)存儲(chǔ)小數(shù)據(jù)，而服務(wù)器可以存儲(chǔ)大數(shù)據(jù)或小數(shù)據(jù)。
服務(wù)器存儲(chǔ)數(shù)據(jù)安全一些，瀏覽器只適合存儲(chǔ)一般數(shù)據(jù)。

sessionStorage 、localStorage 和 cookie 之間的區(qū)別

共同點(diǎn)：都是保存在瀏覽器端，且同源的。
　　區(qū)別：
　　　　1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
　　　　2.存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
　　　　3.數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
　　　　4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
　　　　5.Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。
　　　　6.Web Storage 的 api 接口使用更方便。

sessionStorage 和 localStorage 之間的區(qū)別

見(jiàn)上面的區(qū)別3、4

sessionStorage與頁(yè)面 js 數(shù)據(jù)對(duì)象的區(qū)別

頁(yè)面中一般的 js 對(duì)象或數(shù)據(jù)的生存期是僅在當(dāng)前頁(yè)面有效，因此刷新頁(yè)面或轉(zhuǎn)到另一頁(yè)面這樣的重新加載頁(yè)面的情況，數(shù)據(jù)就不存在了。
而sessionStorage 只要同源的同窗口（或tab）中，刷新頁(yè)面或進(jìn)入同源的不同頁(yè)面，數(shù)據(jù)始終存在。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，加載新頁(yè)面或重新加載，數(shù)據(jù)仍然存在。

以下簡(jiǎn)單演示下增刪改查的用法：

<script type="text/javascript">

   if(window.sessionStorage){
       alert('ok');
   }else{
       alert('fail');
   }

   // 設(shè)置值
   sessionStorage.setItem('key_a', 1);
   // 取值
   var key_a = sessionStorage.getItem('key_a');
   console.log(key_a);
   // 刪除
   sessionStorage.removeItem('key_a');
   console.log(sessionStorage.getItem('key_a'));// null

   sessionStorage.setItem('key_b', 1);
   sessionStorage.setItem('key_c', 2);

   // 清除所有鍵值
   sessionStorage.clear();
   console.log(sessionStorage.key_b);
   console.log(sessionStorage.key_c);

   console.log('==================');

   // 設(shè)置值和取值也可以使用.符號(hào)，類似于取對(duì)象屬性
   // 設(shè)置值
   sessionStorage.key_d = 12;
   // 取值
   var key_d = sessionStorage.key_d;
   console.log(key_d);

   // 有個(gè)小區(qū)別，如果這個(gè)key沒(méi)有了。一個(gè)返回值undefined，一個(gè)是null
   console.log(sessionStorage.key_null);// undefined
   console.log(sessionStorage.getItem('key_null'));// null



   console.log('==========簡(jiǎn)單演示一個(gè)存放對(duì)象的例子========');

   var obj = {
       a : 12,
       b : [1,2,3,4,5],
       c : {
           x : 'a',
           y : ['bb', 12, 'cc', {a:1,b:2}],
           z : 1333
       }
   };

   sessionStorage.setItem('page', JSON.stringify(obj));

   // 取值
   var page = JSON.parse(sessionStorage.getItem('page'));
   console.log(page);

   // 遍歷下數(shù)組
   for(var i=0;i< page.b.length;i++){
       console.log(page.b[i]);
   }
   // 遍歷對(duì)象，通常用in
   for(var j in page.c){
       console.log(page.c[j])
   }

   // 刪除key
   sessionStorage.removeItem('page');

</script>