前端知识小游戏

小游戏

今天有意思，玩上了与浏览器相关的小游戏。先附上连接http://game.cyqdata.com/

先是第一关：

 

一上来就是空白页连个连接都没有，惟点击开始有一个提示框。打开控制台发现超连接的onclick()并无实现跳转功能

因此只须要将a标签修改成onclik="gotoUrl()"

---

 第二关

:

答案可是毫无疑问是2，再聪明点多是3，那么问题来了哪里去输入2？再次打开控制台。发现有一个隐藏input。

此时发现有个奇奇怪怪的value="5LqM6L+b5Yi2Lmh0bWw="。幸好以前有学到这个编码方式，Base64编码。经过Base64在线编码器解码获得二进制.html；好的第二个页面出来了。

？？？？什么东西？？？？按道理不该该是这样的。冷静想一想，二进制指的会不会是要2的二进制10，因而尝试了10.html

？？非法？难不成我没有办理护照？想了好久，非法入境，设置了权限？而后找了好久的答案。并无结果，若是服务器端设置了权限，那么我就根本没法继续下去，因而换了一个角度思考，会不会缺乏了参数。因而我在控制台不停的刷新数据，都是一篇空白。而后查看了好久响应内容，都是一堆乱码，然而并无关系，重要的是我发现了进入这个页面须要一个参数"？t=1"。因此在路径中须要有加上这一字符串就行了。

 

---

第三关：

 

so easy？不要被骗了。打开控制台看到一下内容

 

 这是什么？？？因而纠结开始了。这特么是什么鬼？难道我要去解释这些编码？

因而开始了个人解码之旅。在dom选项窗口中发现了对我编码彷佛颇有用的东西。

因而我在想，会不会是一串$符号对应一个字符？而后我就去解释这些$符号，发现这个不可行，这串编码自己就是为了避免给其余人看出来而设置的编码，我单独去解释也不必定解释的出来，固然不是不能够，只是须要花点时间。陷入沉思。最后在表哥的帮助下，提示，浏览器自己有许多能够存放消息的地方，要去了解浏览器的机制，是如何接受消息，如何存放文件的，因而灵光以上，在浏览器中存放数据机制中，最多见的就是cookie，果不其然就是存在这里。一样的base64解码就能够得到一个界面了。

---

总结一下，那么做为一个走向前端的编程人员，浏览器是必需要熟悉了解的工具，由于咱们所作的一块儿页面都必须在浏览器中显示。

 

浏览器缓存说明

 1、http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求状况下，浏览器能够根据协议头判断从服务器端请求文件仍是从本地读取文件，chrome控制台下的Frames即展现的是浏览器的http文件级缓存。如下是浏览器缓存的整个机制流程。主要是针对重复的http请求，在有缓存的状况下判断过程主要分3步：

◆判断expires，若是未过时，直接读取http缓存文件，不发http请求，不然进入下一步。

◆判断是否含有etag，有则带上if-none-match发送请求，未修改返回304，修改返回200，不然进入下一步。

◆判断是否含有last-modified，有则带上if-modified-since发送请求，无效返回200，有效返回304，不然直接向服务器请求。 

 

若是经过etag和last-modified判断，即便返回304有至少有一次http请求，只不过返回的是304的返回内容，而不是文件内容。因此合理设计实现expires参数能够减小较多的浏览器请求。

2、websql

websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有如下特色：

◆Web Sql 数据库API 实际上不是HTML5规范的组成部分;

◆在HTML5以前就已经存在了，是单独的规范;

◆它是将数据以数据库的形式存储在客户端，根据需求去读取;

◆跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的;

◆Web Sql 更方便于检索，容许sql语句查询;

◆让浏览器实现小型数据库存储功能;

◆这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持;

websql API主要包含三个核心方法：

◆openDatabase : 这个方法使用现有数据库或建立新数据库建立数据库对象。

◆transaction : 这个方法容许咱们根据状况控制事务提交或回滚。

◆executeSql : 这个方法用于执行真实的SQL查询。

openDatabase方法能够打开已经存在的数据库，不存在则建立：

var db = openDatabase('mydatabase', '2.0', my db',2*1024); 

openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、建立回调。建立回调没有也能够建立数据库。

database.transaction() 函数用来查询，executeSql()用于执行sql语句。

 

3、indexDB

IndexedDB 是一个为了可以在客户端存储可观数量的结构化数据，而且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储，对于存储少许数据是很是有用的，可是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。

IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 原本是要用于仅供 Web Workers 内部使用，可是尚未被任何浏览器所实现。异步 API 在 Web Workers 内部和外部均可以使用，另外浏览器可能对indexDB有50M大小的限制，通常用户保存大量用户数据并要求数据之间有搜索须要的场景。

异步API

异步 API 方法调用完后会当即返回，而不会阻塞调用线程。要异步访问数据库，要调用 window 对象 indexedDB 属性的 open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest);异步操做经过在 IDBRequest 对象上触发事件来和调用程序进行通讯。

◆IDBFactory 提供了对数据库的访问。这是由全局对象 indexedDB 实现的接口，于是也是该 API 的入口。

◆IDBCursor 遍历对象存储空间和索引。

◆IDBCursorWithValue 遍历对象存储空间和索引并返回游标的当前值。

◆IDBDatabase 表示到数据库的链接。只能经过这个链接来拿到一个数据库事务。

◆IDBEnvironment 提供了到客户端数据库的访问。它由 window 对象实现。

◆IDBIndex 提供了到索引元数据的访问。

◆IDBKeyRange 定义键的范围。

◆IDBObjectStore 表示一个对象存储空间。

◆IDBOpenDBRequest 表示一个打开数据库的请求。

◆IDBRequest 提供了到数据库异步请求结果和数据库的访问。这也是在你调用一个异步方法时所获得的。

◆IDBTransaction 表示一个事务。你在数据库上建立一个事务，指定它的范围(例如你但愿访问哪个对象存储空间)，并肯定你但愿的访问类型(只读或写入)。

◆IDBVersionChangeEvent 代表数据库的版本号已经改变。

同步API

规范里面还定义了 API 的同步版本。同步 API 尚未在任何浏览器中得以实现。它本来是要和webWork 一块儿使用的。

 

4、cookie

Cookie(或者Cookies)，指通常网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(一般通过加密)。cookie通常经过http请求中在头部一块儿发送到服务器端。一条cookie记录主要由键、值、域、过时时间、大小组成，通常用户保存用户的认证信息。cookie最大长度和域名个数由不一样浏览器决定，具体以下：

浏览器 支持域名个数 最大长度 IE7以上 50个 4095B Firefox 50个 4097B Opera 30个 4096B Safari/WebKit 无限制 4097B

不一样域名之间的cookie信息是独立的，若是须要设置共享能够在服务器端设置cookie的path和domain来实现共享。浏览器端也能够经过document.cookie来获取cookie，并经过js浏览器端也能够方便地读取/设置cookie的值。

5、localstorage

localStorage是html5的一种新的本地缓存方案，目前用的比较多，通常用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

浏览器 最大长度 IE9以上 5M Firefox 8以上 5.24M Opera 2M Safari/WebKit 2.6M //localStorage核心API: localStorage.setItem(key, value)    //设置记录 localStorage.getItem(key)           //获取记录 localStorage.removeItem(key)        //删除该域名下单条记录 localStorage.clear()                //删除该域名下全部记录 

值得注意的是，localstorage大小有限制，不适合存放过多的数据，若是数据存放超过最大限制会报错，并移除最早保存的数据。

https://github.com/machao/localStorage

6、sessionstorage

sessionStorage和localstorage相似，可是浏览器关闭则会所有删除，api和localstorage相同，实际项目中使用较少。

7、application cache

application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时经过manifest文件来读取本地文件或是请求服务器文件。

离线访问对基于网络的应用而言愈来愈重要。虽然全部浏览器都有缓存机制，但它们并不可靠，也不必定总能起到预期的做用。HTML5 使用ApplicationCache 接口能够解决由离线带来的部分难题。前提是你须要访问的web页面至少被在线访问过一次。

使用缓存接口可为您的应用带来如下三个优点：

◆离线浏览 – 用户可在离线时浏览您的完整网站。

◆速度 – 缓存资源为本地资源，所以加载速度较快。

◆服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。

 

8、cacheStorage

CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 能够保存每一个serverWorker申明的cache对象，cacheStorage有open、match、has、delete、keys五个核心方法，能够对cache对象的不一样匹配进行不一样的响应。

cacheStorage.has()

若是包含cache对象，则返回一个promise对象。

cacheStorage.open()

打开一个cache对象，则返回一个promise对象。

cacheStorage.delete()

删除cache对象，成功则返回一个promise对象，不然返回false。

cacheStorage.keys()

含有keys中字符串的任意一个，则返回一个promise对象。

cacheStorage.delete()

匹配key中含有该字符串的cache对象，返回一个promise对象。

 

9、flash缓存

这种方式基本不用，这一方法主要基于flash有读写浏览器端本地目录的功能，同时也能够向js提供调用的api，则页面能够经过js调用flash去读写特定的磁盘目录，达到本地数据缓存的目的。