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

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

sessionStorage衷蜓、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)尘喝，其中sessionStorage的概念很特別磁浇，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中朽褪，始終存在的數(shù)據(jù)置吓。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面缔赠，數(shù)據(jù)仍然存在衍锚。關(guān)閉窗口后，sessionStorage即被銷毀嗤堰。同時(shí)“獨(dú)立”打開的不同窗口戴质，即使是同一頁面，sessionStorage對(duì)象也是不同的梁棠。

Web Storage帶來的好處：

1.減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地后置森，就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請(qǐng)求符糊，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞凫海。
　　2.快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多男娄，本地?cái)?shù)據(jù)可以即時(shí)獲得行贪。再加上網(wǎng)頁本身也可以有緩存漾稀，因此整個(gè)頁面和數(shù)據(jù)都在本地的話，可以立即顯示建瘫。
　　3.臨時(shí)存儲(chǔ)：很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用崭捍，關(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ù)庫和云存儲(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ù)器端的開銷較大陌兑，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。
瀏覽器端一般只用來存儲(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ù)器間來回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器硬鞍，僅在本地保存慧瘤。cookie數(shù)據(jù)還有路徑（path）的概念戴已，可以限制cookie只屬于某個(gè)路徑下。
　　　　2.存儲(chǔ)大小限制也不同锅减，cookie數(shù)據(jù)不能超過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過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉荞膘。
　　　　4.作用域不同罚随，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面羽资；localStorage 在所有同源窗口中都是共享的淘菩；cookie也是在所有同源窗口中都是共享的。
　　　　5.Web Storage 支持事件通知機(jī)制屠升，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者潮改。
　　　　6.Web Storage 的 api 接口使用更方便。

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

見上面的區(qū)別3腹暖、4

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

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

以下簡單演示下增刪改查的用法：

<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沒有了宝与。一個(gè)返回值undefined焚廊，一個(gè)是null
   console.log(sessionStorage.key_null);// undefined
   console.log(sessionStorage.getItem('key_null'));// null



   console.log('==========簡單演示一個(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>