關於localStorage面試的那點事

最近面試的時候關於html5API總會被問到localStorage的問題， 對於通常的問題很簡單，無非就是

• localStorage、sessionStorage和cookie這三個客戶端緩存的區別

• localStorage的API，getItem,setItem,clear等等

• localStorage存取數據是以字符串的形式，最大容量是5M

上面的三個問題大部分同窗均可以回答出來，那麼，面試官的問題來了：

字符串最大容量是5M，那麼我若是存儲容量溢出了怎麼辦？

其實這個5M對於不一樣瀏覽器來講也是不肯定的，不過大致上是一個5M的範圍，溢出了怎麼辦，確定會發生錯誤啊。瀏覽器會報一個名爲「QuotaExceededError」的錯誤，以下圖：

最後一次溢出的字符串是會存儲到最大容量中止仍是不會存儲？

正常狀況下，可能不會存儲5M的字符串，可是也不能保證瀏覽器日積月累的狀況下，恰巧用戶也沒清理過緩存，那麼當最後容量接近5M的時候，咱們再存儲一個字符串進去的時候會發生錯誤，發生錯誤的字符串是存了一半？仍是壓根就沒存呢？答案是---沒存。下面是我寫的一個demo，最後發現報錯的時候刷新瀏覽器，localStorage的當前容量爲發生變化。

既然存在安全問題，那麼localStorage的使用就不是絕對安全的，如何更安全的使用localStorage？

前端的安全性是十分重要的一個話題，由於咱們直接與用戶打交道，你的程序在前端發生不可預知的錯誤是必定要避免的。所以這種不安全的API，咱們須要找到解決辦法，下面是個人一個解決辦法（可能不是最優解，可是可行）。

(function(){
  var safeLocalStorage = function(key, value) {
    try{
      localStorage.setItem(key,value);
    }catch(oException){
      if(oException.name == 'QuotaExceededError'){
          console.log('已經超出本地存儲限定大小！');
          // 可進行超出限定大小以後的操做，以下面能夠先清除記錄，再次保存
          localStorage.clear();
          localStorage.setItem(key,value);
      }
    }
  }
  this.safeLocalStorage = safeLocalStorage;
})();

面試官一波素質三連！對於只是會使用localStorage的同窗來講，確定是不得其解的。其實這也是不少同窗準備面試的時候因該考慮的問題，或者說應該主攻的方向（雖然我才畢業，可是自身遇到的問題總結出來但願對你們有幫助）。在學習知識時，懂得使用當然重要，可是若是想熟練掌握一個知識點，必須更加深入的挖掘才能夠。

Demo地址：https://github.com/zhoudeyou9...
前端小白，第一次發文，決心把本身的學習成長過程寫下來，歡迎批評指正o(￣︶￣)o