記得在牛客網裏看到過一道題，談一談對cookies、localStorage、sessionStorage的區別？

在這裏我們就來談一談這三種存儲方式的區別與優缺點。

一、Cookies

首先呢，我們來談一談這裏面比較老的一個概念cookie，其實在做網絡請求或者是ajax的時候大家都會發現，我們發送請求的時候是會把cookie一起發送的，這就是cookie最初的用處，是用來做Client客戶端與server服務器的通信的，那麽有人可能就會疑惑了，那為啥會把它歸為存儲一類，其實是因為cookie具有本地存儲的功能，所以說我們借用了它的這種能力去實現某些功能。

那麽，它作為存儲缺點在哪兒呢？談的最多的一個問題就是存儲量非常的小，4KB，而且我們可以看到每次的http請求都會將所有的cookie帶著發送，這會影響我們請求的效率，再其次我們要設置cookie也比較麻煩，用起來很不舒服。

二、localStorage和sessionStorage

這是H5提出的兩個用於存儲的兩個標準，最大的存儲是5M，同時呢，存儲的API比較簡單，沒有那麽繁瑣。

1 //  存
2 localStorage.setItem(key, value);
3 //  取
4 localStorage.getItem(key);

我們可能會想為什麽cookie只能4k，而這倆可以做到5M呢，大家可以想一想，如果要是cookie能有5M會出現什麽情況，每次發送請求都要帶上5M的cookie，那就很恐怖了，所以後面這個能做到5M因為在發送請求的時候不用帶上。

那麽他們倆有什麽區別呢，當然有，從名字上看，一個local一個session，大家都知道session是什麽，會話的意思，所以sessionStorage在會話結束的時候就會清理掉，而local你不主動去清理的話它會一直存在。當然了我們用的比較多的還是localStorage。大家可以看一看淘寶的頁面中的使用情況。

可以看到淘寶在localStorage裏存儲了圖片的數據等，我們在工作中使用到localStorage還是比較多的。

三、總結

現在總結一下，這三個的區別，首先呢，最明顯的區別就是存儲的容量，cookie非常小，而後兩個要大。其次，cookie要跟隨著請求走，而後兩個不會，最後相對的來說，後兩種的API更加的簡單，cookies相對要麻煩一點。所以在使用的時候，對於存儲的數據我們是用localStorage，對於要進行交互的數據放在cookie中，而sessionStorage存儲的是會話級的數據。

js之存儲