关于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