放寒假了,整日昏昏欲睡,实在无聊。今天看了一会书,忽然发现一个让自己感兴趣的玩意——HTML5 localStorage,于是花了一下午加半晚上的时间完成了这个应用。
很多该说的,该写的已经在源码里了。相信大家都和我一样,喜欢看源码。源码来的直接一点。遂奉上源码,当然还有整个项目的百度网盘地址,由于只使用了3张很小的图片,遂整个应用显的很苗条,压缩之后只剩下156KB了。
应用地址:http://liyaodong.sinaapp.com/localStorage/
百度网盘源码下载:http://pan.baidu.com/share/link?shareid=249047&uk=3171893396
Tip:源码下来后直接是看不到效果的,localStorage需要服务器的支持。wamp搭建个临时的吧。
技术难点分析:
首先就是localStorage了,localStorage就是一个基于客户端的数据库吧,可以这么说。但是这个数据库只能放点不是很重要的玩意,如果你放进去账号密码。那么再删除浏览器或者更换浏览器或者清空缓存或者重装系统之后,恭喜你,你就杯具了。localStorage允许我们在客户端,即浏览器内存储5MB的数据。神马?才5MB?太小气了吧。起初我也这么认为,但是当我支持Cookies只支持4K之后我突然觉得HTML5已经很大方了。毕竟是客户端嘛,相对于Cookies来说,localStorage有更大的空间,更长的生命周期。可以存储更多的东西,这会使你的应用看起来更像应用一点。不是吗?
那么localStorage到底怎么看呢?打开你的Chrome,不要给我说你还在用IE6,请使用支持HTML5的浏览器,例如Chrome、Safari、猎豹、360急速、搜狗等国产浏览器的急速模式。也就是webkit,因为我没有针对火狐和IE这2B做优化。所以应该是看不了的,推荐使用webkit内核的浏览器查看。如果你确定是webkit内核了,请按F12,打开审查元素,点击Resources看左侧的Local Storage,选中你查看的网站的域就可以了。需要注意的是localStorage需要有服务器的支持,没有服务器的亲可以下载wamp或者phpnow之类的。
如果你在即时贴中输入数据就可以看到localStorage中有数据了。
难点二就是让颜色随机的很好看了,这个是通过控制HSL颜色模式中的H来达到目的的,HSL和RGB、HSB一样都是一种颜色模式,而且CSS原生支持HSL,起初我还在为RGB转HSB的公式而头疼,我这人不喜欢数学。但是RGB转HSB的公式让我想起了我蛋疼的高数。正在沮丧之时我看到CSS的手册中颜色模式有HSL,就差一个B,估计也2不到哪去。然后研究了一下发现HSL和HSB很像,但只是很像,具体区别请找度娘。
难点三呢就是没有了,其他的CSS、响应式WEB都不算难点,因为写JS是最花时间和脑细胞的。看起来就会觉得头疼。不是吗?
下面不废话了,奉上源码,给不能再百度网盘下载源码的亲们,希望大家寒假都能有所收获:
HTML源码:
|
|
CSS源码:
|
|
终于要到了最头疼的JS源码了,不过也是最有技术含量的部分:
|
|