詳解Cookie，localStorage與seesionStorage

前言

• 這些api的發展歷程？
• 這些api各自的優缺點是什麼？
• 這些api的使用場景？
• 怎麼用就不說了，由於直接看文檔就能夠了

參考了不少篇文章，如今把所看的內容總結一下。

發展歷程

長久以來，本地存儲能力一直是桌面應用區別於Web應用的一個主要優點。對於桌面應用，操做系統通常都提供了一個抽象層來幫助應用程序保存其本地數據。但遺憾的是，因爲一些緣由，在web的發展史上，在很長的一段時間裏Cookie是惟一能夠使用的在用戶本地存儲少許的數據的方法。一直隨着現代瀏覽器開始支持各類各樣的存儲方式，Cookie的部分功能才漸漸被取代。

Cookie的優缺點

優勢：

• 能夠方便的控制Cookie生命週期。
• 持久性數據(Persistent data)。
• 能夠設置做用域。

缺點：

• Cookie數量和長度受限制，數量部分不一樣的瀏覽器不同，長度是不能超過4KB，不然會被截掉。
• 瀏覽器的每次請求都會攜帶Cookie數據，會帶來額外的性能開銷，浪費帶寬(尤爲是在移動開發環境下)。
• Cookie是以單字符串的形式保存在客戶端的，因此利用原生js不利於操做。
• Cookie更容易受到安全攻擊。

localStorage的優缺點

優勢：

• 以鍵值對的形式進行存儲，存儲的是原始值，瀏覽器提供了更易操做的api。
• 更大的存儲空間，相同域最多能夠存儲5MB。
• 不會在每一個HTTP請求中被攜帶。
• 遵循同源政策，保存數據會相對來講安全些。

缺點：

• 不能直接控制生命週期，須要本身利用js進行封裝以後才能操做。
• 若是服務端須要客戶端的存儲信息，你須要手動添加它。

sessionStorage的優缺點

sessionStorage基本上和localStorage是相同的，同屬於Web Storage，返回的也都是一個Storage對象。區別在於sessionStorage在關閉瀏覽器或者是當前標籤頁（有的人說關閉tab不清空，可是規範上有寫，sessionStorage 是基於browsing context來呈現的）時，存儲的數據都會被清空掉。

應用場景

Cookie由於它的實現特色，因此更多的是保存讓服務端能夠得到的數據，保存用戶的我的的用戶信息，讓服務端知道當前用戶是誰，如保存sessionId。而localStorage則是用來服務客戶端的，能夠保存主題設置，用戶配置的一些信息。sessionStorage更多的是像對localStorage的一個補充，能夠用來保存頁面的會話信息。

參考文章

• 深刻HTML5: HTML5 本地存儲( Local Storage )的前世此生 (一)
• HTTP cookies
• Cookie的工做原理與優缺點
• Local Storage vs Cookies
• What is the difference between sessionstorage, localstorage and Cookies?