简述下html5的离线储存原理，同时说明如何使用？
利用浏览的.appcache 缓存机制(不是技术),通过 appcache文件上面的解析清单离线缓存资源,这些资源会像 cookie 一样被存储下来.之后在利息那状态的时候,浏览器会通过离线存储的数据进行页面展示.
- 页面头部加入一个 manifest的属性
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
- 在 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 也可*/
清除浮动的方式有哪些及优缺点？
- 在外部盒子内添加带 clear 属性的空盒子
可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
缺点：引入了冗余元素 - 在父类 div 中添加 overflow:hidden 清除浮动.
给外部和添加属性非常简单,
缺点:有可能造成溢出元素不可见,影响展示 - 用 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("");
}
网友评论