day08（html5的离线储存原理、清除浮动的方式、加密字符串）_综合

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

原理：

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

①　页面头部像下面一样加入一个manifest的属性。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">...
</html>

在cache.manifest文件的编写离线存储的资源。

CACHE MANIFEST#v0.1CACHE:js/index.jscss/index.cssNETWORK:images/logo.pngFALLBACK:*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：

①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代所有html文件。

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

浮动带来的问题：盒子塌陷问题

什么是盒子塌陷：外部盒子本应该包裹住内部的浮动盒子，结果却没有

问题出现的原因：父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了

解决方案：

1、上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动

把外部盒子也从标准文档流中抽离，让它和孩子们见面

缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局

不建议使用

2、在外部盒子内最下方添上带clear属性的空盒子

可以是div也可以是其它块级元素，把 <div style="clear:both;"></div>放在盒内底部，

用最下面的空盒子清除浮动，把盒子重新撑起来

缺点：引入了冗余元素

3、用 overflow:hidden 清除浮动
给外部盒子添上这个属性就好了，非常简单。
缺点：有可能造成溢出元素不可见，影响展示效果。

4、用 after 伪元素清除浮动
给外部盒子的after伪元素设置clear属性，再隐藏它
这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。
这也是bootstrap框架采用的清除浮动的方法

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例

在平常的css编写过程中，zoom:1 能够比较神奇地解决ie下比较奇葩的bug

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的haslayout属性等等

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

3、写一个加密字符串的方法

方法1：使用escape() 函数

      var str = '我是被简单的加密了'console.log(escape(str))// %u6211%u662F%u88AB%u7B80%u5355%u7684%u52A0%u5BC6%u4E86

escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。

提示：可以使用 unescape() 对 escape() 编码的字符串进行解码。

注释：ECMAScript v3 反对使用该方法，应用使用 decodeURI() 和 decodeURIComponent() 替代它。

方法2：使用凯撒密码

加密：

      function encodeStr(str = '', padding = 3) {return !str? str: str.split('').map(s => String.fromCharCode(s.charCodeAt() + padding)).join('')}console.log(encodeStr('hello world')) // khoor#zruog

解密：

      function codeStr(str = '', padding = 3) {return !str? str: str.split('').map(s => String.fromCharCode(s.charCodeAt() - padding)).join('')}console.log(codeStr('khoor#zruog')) // hello world

3、利用 base64, 浏览器环境自带 btoa/atob 方法(仅支持浏览器端)

加密：

      function encode(str){return btoa(encodeURIComponent(str))}console.log(encode('hello world')) // aGVsbG8lMjB3b3JsZA==

解密：

      function decode(str) {return decodeURIComponent(atob(str))}console.log(decode('aGVsbG8lMjB3b3JsZA==')) // hello world