关于localStorage面试的那点事

timger 发布于2019-08-01 17:57 / 675人阅读

摘要：已经超出本地存储限定大小可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存面试官一波素质三连对于只是会使用的同学来说，肯定是不得其解的。

最近面试的时候关于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

云服务器 GPU云服务器关于云服务器面试关于云服务器面试题理那点 localstorage

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51488.html

关于性能优化的那点事——函数防抖

摘要：函数防抖场景假设网站有个搜索框用户输入文本我们会自动联想匹配出一些结果供用户选择我们可能首先想到的做法就是监听事件然后异步查询结果但是如果用户快速的输入了一串字符假设是个字符那么就会在瞬间触发次请求这无疑不是我们想要的我们想要的是用户停止输函数防抖场景假设网站有个搜索框, 用户输入文本我们会自动联想匹配出一些结果供用户选择,我们可能首先想到的做法就是监听keypress事件, 然...

Stardustsky 2019-08-21 14:21 评论0 收藏0
关于var，let，const的那点事

摘要：一直使用定义变量，的出现给变量定义增加了两个大将，。声明的变量，块作用域，不重复声明覆盖，限制了变量的作用域，保证变量不会去污染全局变量，所以尽量将改为用。一直使用var定义变量，ES6的出现给变量定义增加了两个大将let，const。那它们有什么区别呢。 1、const关键字它的作用就是定义一个常量,一旦定义无法更改，不能重复声明覆盖； showImg(https://segmen...

KavenFan 2019-08-20 14:26 评论0 收藏0
关于性能优化的那点事——函数节流

摘要：函数节流背景中的函数大多数情况下都是由用户主动调用触发的除非是函数本身的实现不合理否则一般不会遇到跟性能相关的问题但在少数情况下函数的触发不是由用户直接控制的在这些场景下函数可能被非常频繁调用而造成大的性能问题场景事件事件滚动事件共同的特征函数节流背景 javascript中的函数大多数情况下都是由用户主动调用触发的, 除非是函数本身的实现不合理, 否则一般不会遇到跟性能相关的问题...

khlbat 2019-08-20 10:31 评论0 收藏0
promise、async和await之执行顺序的那点事

摘要：是这样描述的函数中可能会有表达式，这会使函数暂停执行，等待表达式中的解析完成后继续执行函数并返回解决结果。返回值返回对象的处理结果。当执行到时，这个任务会被放入到回调队列中，等待调用栈有空闲时事件循环再来取走它。原文地址：https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html 故事要从一道今日头条的笔试题说起...

高胜山 2019-08-22 17:36 评论0 收藏0
查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0