關于localStorage面試的那點事

timger 發(fā)布于2019-08-01 17:57 / 703人閱讀

摘要：已經超出本地存儲限定大小可進行超出限定大小之后的操作，如下面可以先清除記錄，再次保存面試官一波素質三連對于只是會使用的同學來說，肯定是不得其解的。

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

localStorage、sessionStorage和cookie這三個客戶端緩存的區(qū)別

localStorage的API，getItem,setItem,clear等等

localStorage存取數(shù)據(jù)是以字符串的形式，最大容量是5M

上面的三個問題大部分同學都可以回答出來，那么，面試官的問題來了：

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

其實這個5M對于不同瀏覽器來說也是不確定的，不過大體上是一個5M的范圍，溢出了怎么辦，肯定會發(fā)生錯誤啊。瀏覽器會報一個名為“QuotaExceededError”的錯誤，如下圖：

最后一次溢出的字符串是會存儲到最大容量停止還是不會存儲？

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

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

前端的安全性是十分重要的一個話題，因為我們直接與用戶打交道，你的程序在前端發(fā)生不可預知的錯誤是一定要避免的。因此這種不安全的API，我們需要找到解決辦法，下面是我的一個解決辦法（可能不是最優(yōu)解，但是可行）。

(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的同學來說，肯定是不得其解的。其實這也是很多同學準備面試的時候因該考慮的問題，或者說應該主攻的方向（雖然我才畢業(yè)，但是自身遇到的問題總結出來希望對大家有幫助）。在學習知識時，懂得使用固然重要，但是如果想熟練掌握一個知識點，必須更加深刻的挖掘才可以。

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

云服務器 GPU云服務器關于云服務器面試關于云服務器面試題理那點 localstorage

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/51488.html

關于性能優(yōu)化的那點事——函數(shù)防抖

摘要：函數(shù)防抖場景假設網站有個搜索框用戶輸入文本我們會自動聯(lián)想匹配出一些結果供用戶選擇我們可能首先想到的做法就是監(jiān)聽事件然后異步查詢結果但是如果用戶快速的輸入了一串字符假設是個字符那么就會在瞬間觸發(fā)次請求這無疑不是我們想要的我們想要的是用戶停止輸函數(shù)防抖場景假設網站有個搜索框, 用戶輸入文本我們會自動聯(lián)想匹配出一些結果供用戶選擇,我們可能首先想到的做法就是監(jiān)聽keypress事件, 然...

Stardustsky 2019-08-21 14:21 評論0 收藏0
關于var，let，const的那點事

摘要：一直使用定義變量，的出現(xiàn)給變量定義增加了兩個大將，。聲明的變量，塊作用域，不重復聲明覆蓋，限制了變量的作用域，保證變量不會去污染全局變量，所以盡量將改為用。一直使用var定義變量，ES6的出現(xiàn)給變量定義增加了兩個大將let，const。那它們有什么區(qū)別呢。 1、const關鍵字它的作用就是定義一個常量,一旦定義無法更改，不能重復聲明覆蓋； showImg(https://segmen...

KavenFan 2019-08-20 14:26 評論0 收藏0
關于性能優(yōu)化的那點事——函數(shù)節(jié)流

摘要：函數(shù)節(jié)流背景中的函數(shù)大多數(shù)情況下都是由用戶主動調用觸發(fā)的除非是函數(shù)本身的實現(xiàn)不合理否則一般不會遇到跟性能相關的問題但在少數(shù)情況下函數(shù)的觸發(fā)不是由用戶直接控制的在這些場景下函數(shù)可能被非常頻繁調用而造成大的性能問題場景事件事件滾動事件共同的特征函數(shù)節(jié)流背景 javascript中的函數(shù)大多數(shù)情況下都是由用戶主動調用觸發(fā)的, 除非是函數(shù)本身的實現(xiàn)不合理, 否則一般不會遇到跟性能相關的問題...

khlbat 2019-08-20 10:31 評論0 收藏0
promise、async和await之執(zhí)行順序的那點事

摘要：是這樣描述的函數(shù)中可能會有表達式，這會使函數(shù)暫停執(zhí)行，等待表達式中的解析完成后繼續(xù)執(zhí)行函數(shù)并返回解決結果。返回值返回對象的處理結果。當執(zhí)行到時，這個任務會被放入到回調隊列中，等待調用棧有空閑時事件循環(huán)再來取走它。原文地址：https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html 故事要從一道今日頭條的筆試題說起...

高勝山 2019-08-22 17:36 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發(fā)中，已經非常普及了。這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發(fā)小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0