webstorage的前端考试系统设计与实现(源码)【字数：15307】
摘 要 摘 要现今，基于网络的考试已经成为常态。虽然市面上有许多基于Web的网上考试系统，但大多数存在难以使用，不易维护等问题。由于HTML5的流行，提供了基于浏览器的离线存储的必要条件，使得设计一个基于前端的考试系统成为可能。本文利用了MEAN stack技术栈，设计并构建一个基于前端的考试系统。该系统包括了常见的在线考试系统功能如出卷，答题；亦基于Web Storage技术，实现了考试部分离线运行如考试答题后，即使刷新页面甚至关闭浏览器，再次使用时，考生的答案依然存在。当网络出现故障时，能够离线计算考生的得分。最后，对系统进行了必要的测试，以确保系统能够如期运行。本文详细介绍了基于浏览器的离线存储技术，同时对Web Storage提出了一些改进方法，望对Web Storage技术感兴趣的人提供帮助。关键词考试系统；Web Storage；MEAN
目录
第一章 绪论 1
1.1 研究背景与意义 1
1.2 前端考试系统的研究现状 1
1.2.1 本地存储的研究现状 1
1.2.2 考试系统的现状 2
1.3 本文的主要内容 2
第二章 相关技术及环境配置 4
2.1 相关技术介绍 4
2.1.1 MEAN介绍 4
2.1.2 基于HEML5的本地存储 5
2.2 开发工具与运行环境 5
2.2.1 编辑工具Webstorm 5
2.2.2 Google Chrome 浏览器 6
2.3 调试工具 6
2.3.1 VSC debug 6
2.3.2 Chrome DevTools 8
2.4 小结 11
第三章 考试系统的分析与设计 12
3.1 需求分析 12
3.1.1 功能性需求分析 12
3.1.2 非功能性需求分析 12
3.2 数据库的分析与设计 13
3.3 小结 15
第四章 考试系统详细设计与实现 16
4.1 登录注册模块 16
4.2 试题管理模块 17 *好棒文|www.hbsrm.com +Q: ^351916072^
4.3 出卷模块 20
4.4 答卷模块 21
4.5 考试计时 22
4.6 离线存储模块 23
4.6.1 离线存储方案分析 24
4.6.2 技术介绍 24
4.6.3 localStorage基础操作方法 25
4.6.4 localstorage性能问题 26
4.6.5 存储格式设计 27
4.6.6 存储上限设计 29
4.7 离线计分模块 29
4.8 小结 31
第五章 考试系统测试 32
5.1 测试工具 32
5.2 测试内容 32
5.3 测试结果与分析 34
5.4 小结 34
结语 35
致谢 36
参考文献 37
第一章 绪论
在当今时代，桌面和移动端的界限正在迅速消失，用户获取信息的要求越来越高。而HTML5简洁明了的语义标记、丰富的媒体支持、大容量的本机储存技术，正在成为新的标准。通过HTML5跨平台的兼容性，HTML5的应用程序可以在不同的操作系统上工作。而包括阿里巴巴在内的大公司，在许多方面放弃了IE7以下浏览器的支持，使得基于HTML5的前端考试系统成为可能。
研究背景与意义
HTML4中缺少了对音频、视频以及客户端技术的支持，间接导致了Flash和SilverLight的流行[1]。而历时8年的HTML5，标准化了音频、视频和canvas等技术，使得WEB应用程序不再需要Flash等技术也能拥有丰富的表现形式。本地存储是HTML5新技术中的一大亮点，本地存储允许在多个窗口之间存储，在关闭浏览器后依然存在，也无需担心cookie删除。
有了本地数据库的支持，让离线应用也成为了可能。传统的试卷考试一般需要经过印刷排版、安排考场、人工批阅试卷和手动计算分数，整个流程需要消耗大量的人力物力。web考试系统可以使考试不受时间和空间的限制，利用Web Storage等前端技术，将考试离线运行，使得考试系统从“能用”转向“体验至上”，通过Web Storage等前端技术，缓解因考生数量多而出现线路堵塞或者断开的情况，从而提高考试系统的欢迎度和利用率，进而提高学生的学习积极性。
综上，利用Web Storage等前端技术，设计并开发一个考试系统，从而建立起完整的认识，并为今后从事的相关项目设计打下一个坚实的开发基础。
前端考试系统的研究现状
在线考试在近几年有了不错的发展，但是基于前端的、利用HTML5存储技术的考试系统却并不多。
本地存储的研究现状
Cookie：cookie在web早期中应用广泛，但是cookie具有非常明显的局限性，cookie不但容量小，而且相当不安全，因此有些站点从安全方面考虑禁用了cookie。不但如此，cookie在每个请求发起时，都会传至服务器端，隐式的造成了带宽浪费。
Flash SharedObject：Flash在HTML5之前是一个最佳选择，因为其不但容量适中，又没有兼容性问题[2]。但是由于其依赖于Flash，需要额外引入swf和js文件，增加了带宽和处理逻辑的复杂度。此外，考虑到Flash经常爆出安全漏洞，Flash正在一步步走向灭亡。
Google Gears：Google开发的离线方案。由于官方推荐html5的localStorage方案，故本文不讨论。
User Data：微软为IE设置的存储方式。由于IE的特立独行，此属性只在IE下工作，在chrome等其它浏览器中不工作。
localStorage：相对于上述本地存储方案，localStorage有自身的优点：不但容量大而且原生支持，更加方便易用；缺点是在IE8以下的版本，并不支持localStorage[3]。此外，由于localStorage是明文存储，任何人都能查看，不宜存储保密信息。
考试系统的现状
国外一些著名的考试，如托福、MCSE(Microsoft 系统工程师认证考试)、GMAT(工商管理硕士入学考试)以及重点大学的面试等都是在网上进行的[4]。而国内的计算机等级考试也在2013年取消笔试改为完全上机考试。现有的考试系统，都是基于浏览器的在线答题，考生点击浏览器中的刷新按钮或者无意触发刷新快捷键，刷新后会发现考试时间会重置，所选答案没有记录，需重新做题等问题。而由于计算机死机、停电等原因考生需重新启动计算机之后，再次做题时发现答案未存储，从而浪费时间。考试时间结束时，由于考生的疏忽或者时间超过限制而没有交卷时，没有提供强制自动提交的机制。当考试结束后，由于网络等原因，考试答题无法上传服务器等问题。
目录
第一章 绪论 1
1.1 研究背景与意义 1
1.2 前端考试系统的研究现状 1
1.2.1 本地存储的研究现状 1
1.2.2 考试系统的现状 2
1.3 本文的主要内容 2
第二章 相关技术及环境配置 4
2.1 相关技术介绍 4
2.1.1 MEAN介绍 4
2.1.2 基于HEML5的本地存储 5
2.2 开发工具与运行环境 5
2.2.1 编辑工具Webstorm 5
2.2.2 Google Chrome 浏览器 6
2.3 调试工具 6
2.3.1 VSC debug 6
2.3.2 Chrome DevTools 8
2.4 小结 11
第三章 考试系统的分析与设计 12
3.1 需求分析 12
3.1.1 功能性需求分析 12
3.1.2 非功能性需求分析 12
3.2 数据库的分析与设计 13
3.3 小结 15
第四章 考试系统详细设计与实现 16
4.1 登录注册模块 16
4.2 试题管理模块 17 *好棒文|www.hbsrm.com +Q: ^351916072^
4.3 出卷模块 20
4.4 答卷模块 21
4.5 考试计时 22
4.6 离线存储模块 23
4.6.1 离线存储方案分析 24
4.6.2 技术介绍 24
4.6.3 localStorage基础操作方法 25
4.6.4 localstorage性能问题 26
4.6.5 存储格式设计 27
4.6.6 存储上限设计 29
4.7 离线计分模块 29
4.8 小结 31
第五章 考试系统测试 32
5.1 测试工具 32
5.2 测试内容 32
5.3 测试结果与分析 34
5.4 小结 34
结语 35
致谢 36
参考文献 37
第一章 绪论
在当今时代，桌面和移动端的界限正在迅速消失，用户获取信息的要求越来越高。而HTML5简洁明了的语义标记、丰富的媒体支持、大容量的本机储存技术，正在成为新的标准。通过HTML5跨平台的兼容性，HTML5的应用程序可以在不同的操作系统上工作。而包括阿里巴巴在内的大公司，在许多方面放弃了IE7以下浏览器的支持，使得基于HTML5的前端考试系统成为可能。
研究背景与意义
HTML4中缺少了对音频、视频以及客户端技术的支持，间接导致了Flash和SilverLight的流行[1]。而历时8年的HTML5，标准化了音频、视频和canvas等技术，使得WEB应用程序不再需要Flash等技术也能拥有丰富的表现形式。本地存储是HTML5新技术中的一大亮点，本地存储允许在多个窗口之间存储，在关闭浏览器后依然存在，也无需担心cookie删除。
有了本地数据库的支持，让离线应用也成为了可能。传统的试卷考试一般需要经过印刷排版、安排考场、人工批阅试卷和手动计算分数，整个流程需要消耗大量的人力物力。web考试系统可以使考试不受时间和空间的限制，利用Web Storage等前端技术，将考试离线运行，使得考试系统从“能用”转向“体验至上”，通过Web Storage等前端技术，缓解因考生数量多而出现线路堵塞或者断开的情况，从而提高考试系统的欢迎度和利用率，进而提高学生的学习积极性。
综上，利用Web Storage等前端技术，设计并开发一个考试系统，从而建立起完整的认识，并为今后从事的相关项目设计打下一个坚实的开发基础。
前端考试系统的研究现状
在线考试在近几年有了不错的发展，但是基于前端的、利用HTML5存储技术的考试系统却并不多。
本地存储的研究现状
Cookie：cookie在web早期中应用广泛，但是cookie具有非常明显的局限性，cookie不但容量小，而且相当不安全，因此有些站点从安全方面考虑禁用了cookie。不但如此，cookie在每个请求发起时，都会传至服务器端，隐式的造成了带宽浪费。
Flash SharedObject：Flash在HTML5之前是一个最佳选择，因为其不但容量适中，又没有兼容性问题[2]。但是由于其依赖于Flash，需要额外引入swf和js文件，增加了带宽和处理逻辑的复杂度。此外，考虑到Flash经常爆出安全漏洞，Flash正在一步步走向灭亡。
Google Gears：Google开发的离线方案。由于官方推荐html5的localStorage方案，故本文不讨论。
User Data：微软为IE设置的存储方式。由于IE的特立独行，此属性只在IE下工作，在chrome等其它浏览器中不工作。
localStorage：相对于上述本地存储方案，localStorage有自身的优点：不但容量大而且原生支持，更加方便易用；缺点是在IE8以下的版本，并不支持localStorage[3]。此外，由于localStorage是明文存储，任何人都能查看，不宜存储保密信息。
考试系统的现状
国外一些著名的考试，如托福、MCSE(Microsoft 系统工程师认证考试)、GMAT(工商管理硕士入学考试)以及重点大学的面试等都是在网上进行的[4]。而国内的计算机等级考试也在2013年取消笔试改为完全上机考试。现有的考试系统，都是基于浏览器的在线答题，考生点击浏览器中的刷新按钮或者无意触发刷新快捷键，刷新后会发现考试时间会重置，所选答案没有记录，需重新做题等问题。而由于计算机死机、停电等原因考生需重新启动计算机之后，再次做题时发现答案未存储，从而浪费时间。考试时间结束时，由于考生的疏忽或者时间超过限制而没有交卷时，没有提供强制自动提交的机制。当考试结束后，由于网络等原因，考试答题无法上传服务器等问题。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/843.html
