2021-01-27面试题

简述下html5的离线储存原理，同时说明如何使用？

利用浏览的.appcache 缓存机制(不是技术),通过 appcache文件上面的解析清单离线缓存资源,这些资源会像 cookie 一样被存储下来.之后在利息那状态的时候,浏览器会通过离线存储的数据进行页面展示.

• 页面头部加入一个 manifest的属性

    ...

• 在 cache.main 文件编写离线存储的资源清单

CACHE MANIFEST
        #v0.1 //表示版本
        CACHE:
            js/index.js //表示要缓存的页面
            css/index.css
        NETWORK:
            images/logo.png //这些资源在有网的时候才访问
        FALLBACK: //表示如果访问的第一个资源失败,那么使用第二个资源代替
            *.html /404.html /* / /404.html 或 /html/ /404.html 也可*/ 

清除浮动的方式有哪些及优缺点？

1. 在外部盒子内添加带 clear 属性的空盒子
   可以是div也可以是其它块级元素，把
   放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
   缺点：引入了冗余元素
2. 在父类 div 中添加 overflow:hidden 清除浮动.
   给外部和添加属性非常简单,
   缺点:有可能造成溢出元素不可见,影响展示
3. 用 after 伪元素清除浮动
   给外部盒子的 after 伪元素设置 clear 属性,在隐藏它
   这其实是对空盒子一种改进,一种纯 CSS 的解决方案,不引入多余元素
   前端生成的密文虽然谈不上安全,但是可以用于混淆文本,防止一些参数被猜到.

写一个加密字符串的方法

特点:
每次生成的密文都不一样,解密后的文本一样

原理:
加密:
将字符串中的字符拆分成数组并将其转为字符的八进制Unicode码->反序->分割字符串->在字符串中随机加入小写字母,将分割符替换为随机大写字母

这样最终生成了 由数字/小写字母/大写字母的 动态密文

解密:
去掉小写字母->将大写字母替换为一个分割符并用分割符 拆分字符串为数组->反序->将八进制Unicode码转字符串->将数组合并成字符串

使用场景:

隐藏一些不想让用户直接看见的参数, 比如 url中的 id 等参数,cookies中的信息等

生活使用:
也可将自己常用的密码加密后保存在电脑上,避免密码被直接暴露.

//加密
function encodeStr(str) {
if (!str) return;
var random = function (lower, upper) {
return Math.floor(Math.random() * (upper - lower + 1)) + lower;
};
var arr = str.toString().split("").map(function (item) {
return item.charCodeAt(0).toString(8)
});
arr.reverse();//反序数组
arr = arr.join("").split("");//暂时使用 _ 分割字符串;
var num = 0;
while (num < str.length) {
var r = String.fromCharCode(random(97, 122));//生成用于混淆的 的 小写字母
arr.splice(random(0, arr.length), 0, r);
num++;
}
return arr.join("").replace(//ig, function (str) {
return String.fromCharCode(random(65, 90));
});//将分割符 _ 替换为随机的 大写字母

}

//解密

function decodeStr(str) {
if (!str) return;
var temp = [];
str.split("").forEach(function (item) {
var code = item.charCodeAt(0);
if (code <= 90 && code >= 65) {
item = "";//将作为分割用的 随机大写字母 统一为 _ 以便切割
temp.push(item);
}else if (code <= 57 && code >= 48) {
temp.push(item);//提取 数字
}
});
temp = temp.join("").split("");
temp.reverse();
var res = temp.map(function (item) {
return String.fromCharCode(parseInt(item, 8));
});
return res.join("");
}