暑假撸系统7- 熊孩子的捣乱！javascript保存前台状态！

系统大体框架已经搭的差不多了， 往下就是技术性的美化以及修补了，但这也是最最耗费时间的。在这个过程就发现了一个有意思的需求，这里把思路以及解决方案总结下。

因为做的是考试系统，不管是大或者小的考试，本身也就是比较重要的，设想如果出现这样的逻辑，试想一个熊孩子写着写着突然手滑点了个倒退按钮、或者浏览器奔溃了、或者浏览器关掉了。这都是是个悲剧。虽然设计的时候认为他应该不会这么操作，但是现实中的客户！

解决方法有两个。

　　1，每做一题服务器保存一次，这样做难免会增加服务器的负担，如果考试人数比较多，这样的操作一定不是最优选！

　　2，保存到前端，但是要保证刷新或者重新登录的时候依然能找到做题的信息。

上面两个方法最好就是采用方法2保存到前端，但是保存到前端的方式js有三种分别是

1. sessionStorage
2. localStorage
3. cookier

都是保存到浏览器

1 不同点：传递方式不同

cookie 数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递

sessionSorage和localStorage不会自动把数据发送服务器，仅保存本地保存。

2 数据大小不同

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

剩下的还有其他的不同点，最后我选择了localstorage方式。

也就是每次学员选择选择相应的题目的时候，通过localStorage保存到本地，然后找个页面加载的时候进行再读出本次考试的key值，然后填充到页面。逻辑基本就是这个。

前台加载的时候读取本地存储，并且根据值把已经做的题展示出来。

 最后别忘了，客户做一道题保存一次！

 

实现效果，做过的题丢不了了！！刷新也能找回来！