亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于localStorage面試的那點(diǎn)事

timger / 740人閱讀

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

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

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

localStorage的API，getItem,setItem,clear等等

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

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

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

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

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

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

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

前端的安全性是十分重要的一個話題，因?yàn)槲覀冎苯优c用戶打交道，你的程序在前端發(fā)生不可預(yù)知的錯誤是一定要避免的。因此這種不安全的API，我們需要找到解決辦法，下面是我的一個解決辦法（可能不是最優(yōu)解，但是可行）。
(function(){
  var safeLocalStorage = function(key, value) {
    try{
      localStorage.setItem(key,value);
    }catch(oException){
      if(oException.name == "QuotaExceededError"){
          console.log("已經(jīng)超出本地存儲限定大小！");
          // 可進(jìn)行超出限定大小之后的操作，如下面可以先清除記錄，再次保存
          localStorage.clear();
          localStorage.setItem(key,value);
      }
    }
  }
  this.safeLocalStorage = safeLocalStorage;
})();

面試官一波素質(zhì)三連！對于只是會使用localStorage的同學(xué)來說，肯定是不得其解的。其實(shí)這也是很多同學(xué)準(zhǔn)備面試的時候因該考慮的問題，或者說應(yīng)該主攻的方向（雖然我才畢業(yè)，但是自身遇到的問題總結(jié)出來希望對大家有幫助）。在學(xué)習(xí)知識時，懂得使用固然重要，但是如果想熟練掌握一個知識點(diǎn)，必須更加深刻的挖掘才可以。

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/51488.html

相關(guān)文章

  • 關(guān)于性能優(yōu)化的那點(diǎn)事——函數(shù)防抖

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

    Stardustsky 評論0 收藏0

  • 關(guān)于var，let，const的那點(diǎn)事

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

    KavenFan 評論0 收藏0

  • 關(guān)于性能優(yōu)化的那點(diǎn)事——函數(shù)節(jié)流

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

    khlbat 評論0 收藏0

  • promise、async和await之執(zhí)行順序的那點(diǎn)事

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

    高勝山 評論0 收藏0

  • 查漏補(bǔ)缺 - 收藏集 - 掘金

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

    YuboonaZhang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<