写在前面
本例使用SVG和canvas两种图形工具，根据点击事件和选择生成图形。效果图如下
↓↓末尾可以进入demo↓↓
整体功能如下：
读取localstorage，通过判断来决定是否更新全局数组arr，若不更新则把初始的object转换为数组并赋予arr。
根据arr参数生成table，并创建checkbox和对应的点击事件，根据checkbox的选中情况更新table的数据。
通过鼠标监听事件更新svg和canvas。为了不使图形看起来太乱，期间使用了队列的思想，即FIFO。注完全是没事找事，不然单用任何一个方法都会简单许多- -
通过hash和location两种方式，记录checkbox的选中情况。
添加更新表格的功能，即可以在table生成之后更改其内容，并保存在localstorage中。
期间遇到的问题：
监听器的冒泡和排序方法，true和false实在是折腾了太久，好在最后通过条件语句完成了对指定dom的操作。参考资料 by 阿良的小站
svg和canvas的更新。canvas更容易一些，不过感觉svg的操作性更强一些。期间遇到了图形更新，不会删除原本的图层的问题，后来通过赋ID值，并在画图的function的开头通过ID删除原本的图形的方式，来解决了这一问题。当然其实可以通过jquery的$(“#”+id).empty()来完成这一步。
hash的使用问题。其实到现在也还没有解决这个问题，就是在数据结构中hash是通过生成一个hash值，再通过一系列计算来生成不重复的序列的方法，但是为啥在hash用做记录操作过程的时候，就要自己定义。那么自己定义的hash值还是hash值吗？这一点至今尚未搞明白。
不同浏览器的兼容问题。例如我遇到的问题是，当点击setting按钮后，获取event.target.parentElement.innertext。在Chrome中获取“NY”,而在firefox中获取的是“N Y”。细微的差别导致整个功能出问题。在consloe.log信息的帮助下，更改表达式，解决了bug。