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