1.HTML5的离线储存如何使用,其工作原理是什么?
在用户没有与因特网连接时,可以正常访问站点或者应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被储存了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如何使用:
- 页面头部像下面一样加入一个manifest的属性;
- 在cache.manifest文件编写离线存储的资源;
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
- 在离线状态时,操作window.applicationCache进行需求实现。
详细的使用请参考:
2.浏览器是怎么对HTML5的离线储存资源进行管理和加载的?
- 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app并资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线储存。
- 离线的情况下,浏览器就直接使用离线存储的资源。
详情请参考:有趣的HTML5:离线存储
3.cookie,sessionStorage和localStorage的区别?
- cookie是网站为了标识用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密);
- cookie数据始终在同源的http请求中携带(即使不需要),在浏览器和服务器间来回传递;
- sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
- cookie数据大小不能超过4K;
- sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或者更大。
有效时间
- localStorage:储存持久数据,浏览器关闭后数据不主动丢失,除非主动删除数据;
- sessionStorage:数据在当前浏览器窗口关闭后自动删除;
- cookie:设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
4.iframe有哪些缺点?
使用iframe之前需要考虑这些缺点。如果需要使用iframe,最好通过JavaScript动态给iframe添加src属性值。
- iframe会阻塞主页面的onload事件;
- 搜索引擎的检索程序无法解读这种页面,不利于SEO;
- iframe和主页面共享连接池,而浏览器对相同的连接有限制,所以会影响页面的并行加载。