棕旨

棕旨 查看完整档案

绵阳编辑西南科技大学  |  物联网工程 编辑SWUST  |  WEB前端工程师 编辑 seahaiworld.gitee.io/ 编辑
编辑

前端小白的进阶之旅

个人动态

棕旨 赞了文章 · 7月28日

关于localStorage面试的那点事

最近面试的时候关于html5API总会被问到localStorage的问题, 对于一般的问题很简单,无非就是

  • localStorage、sessionStorage和cookie这三个客户端缓存的区别

  • localStorage的API,getItem,setItem,clear等等

  • localStorage存取数据是以字符串的形式,最大容量是5M

上面的三个问题大部分同学都可以回答出来,那么,面试官的问题来了:

字符串最大容量是5M,那么我如果存储容量溢出了怎么办?

其实这个5M对于不同浏览器来说也是不确定的,不过大体上是一个5M的范围,溢出了怎么办,肯定会发生错误啊。浏览器会报一个名为“QuotaExceededError”的错误,如下图:

clipboard.png

最后一次溢出的字符串是会存储到最大容量停止还是不会存储?

正常情况下,可能不会存储5M的字符串,但是也不能保证浏览器日积月累的情况下,恰巧用户也没清理过缓存,那么当最后容量接近5M的时候,我们再存储一个字符串进去的时候会发生错误,发生错误的字符串是存了一半?还是压根就没存呢?答案是---没存。下面是我写的一个demo,最后发现报错的时候刷新浏览器,localStorage的当前容量为发生变化。

clipboard.png

既然存在安全问题,那么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

查看原文

赞 8 收藏 8 评论 0

棕旨 发布了文章 · 6月30日

MATLAB 2018a

迅雷链接: magnet:?xt=urn:btih:473E37B9B1404C4994532DF062CF9C3B999387C3
安装教程:
1 请先将“R2018a_win64_dvd1.iso” 和 “R2018a_win64_dvd2.iso” 解压到同一文件夹,解压后如下所示,解压后点击setup.exe即可。

迅雷下载完成后,大家会直接看到MATLAB R2018a Win 这个文件夹,只需要同时选中其中的dvd1.iso和dvd2.iso快速解压即可,可以看到是有setup.exe文件的,大家仔细一点就好。

选择使用文件安装密钥,下一步

3.安装方法选择“使用文件密钥”,输入序列号 09806-07443-53955-64350-21751-41297

4.更改安装路径,由于我C盘是学校正版的16版matlab,未卸载,因此安装在了D:Program FilesMatlabR2018a,然后点击下一步
5.选择安装的程序(一般尽量按默认的全选),选择下一步,然后点击安装,需要等待几分钟左右。

打开安装文件夹中设定的安装目录,在bin文件夹中,将matlab.exe创建快捷方式并发送到桌面
然后点击打开发送到桌面的matlab快捷方式,选择离线激活,选择破解文件夹中的license_standalone.lic,此文件在MATLAB R2018a x64 Crack.rar 解压后的文件里。

上一步要选的lic文件也是有的,实在不知道大家下面评论里反映的没有这个文件时怎么回事,个人觉得最好关闭掉杀毒软件和网络吧

8.复制破解文件夹Crackbinwin64中的netapi32.dll文件到对应的matlab安装目录下的binwin64 文件夹下

至此破解全部完成,点击桌面图标即可使用了。

查看原文

赞 0 收藏 0 评论 0

棕旨 关注了问题 · 4月18日

我想问一下大佬们视频弹窗怎么做,不希望跳转页面,并且能在多个页面实现

图片.png
然后出现弹窗
图片.png
我用的是隐藏元素,把元素隐藏,点击后属性设置block。实现弹出窗口,我希望在多个页面实现这样的功能。这样很明显太麻烦了,我并不希望跳转页面,希望大佬给予解答

关注 5 回答 3

棕旨 提出了问题 · 3月7日

puppeteer 部署服务器后报错

puppeteer 写的爬虫
本地运行没有问题,部署到云服务器,就报错了
QQ截图20200307133859.png

关注 2 回答 1

棕旨 提出了问题 · 3月7日

puppeteer 部署服务器后报错

puppeteer 写的爬虫
本地运行没有问题,部署到云服务器,就报错了
QQ截图20200307133859.png

关注 2 回答 1

棕旨 关注了问题 · 3月7日

puppeteer 部署服务器后报错

puppeteer 写的爬虫
本地运行没有问题,部署到云服务器,就报错了
QQ截图20200307133859.png

关注 2 回答 1

棕旨 回答了问题 · 2月15日

解决浏览器端可以爬取别人网站的数据吗?

可以,使用puppeteer可以实现。
puppeteer爬虫-爬取豆瓣电影

关注 4 回答 3

棕旨 回答了问题 · 2月12日

constructs() { super()} 有什么用,还报错

constructs( ) 是 React 的构造函数
用于给 this.state 赋值对象来初始化内部 state和为事件处理函数绑定实例
在 Class 使用构造函数时,应在其他语句之前前调用 super(props) 。否则, this.props 在构造函数中可能会出现未定义的 bug
如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数。
详细可以看 React 的官方文档

关注 2 回答 1

棕旨 回答了问题 · 2月12日

解决CSS样式,鼠标移入改变图片。

//html
<div class="box">
    <img class="img1"/>
    <img class="img2"/>
</div>
//css
        .box{
            width: 300px;
            height: 800px;
        }
        .img1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .img2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 1s ease-in-out;
        }
        .box:hover
            .img2{
            transform: translateY(-100%);
        }

关注 4 回答 3

棕旨 赞了回答 · 2月12日

解决纯css如何能实现鼠标移入图片变为文字

// html
<div>
    <img />
    <span>列表</span>
</div>

// css
div span{
    display: none;
}

div:hover span{
    display: block;
}
div:hover img{
    display: none;
}

伪类也是一样,其它的还有opticity透明度变化、css3 位移等。

关注 2 回答 1

认证与成就

  • 获得 8 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-09-12
个人主页被 382 人浏览