html5特性浅谈，离线存储，多线程等
我觉得，html5是不是规范其实不重要，所有的主流浏览器都或多或少的实现并竞争式的比拼实现的程度，单凭这一点就足够了。因为要在四月一号听一个讲座所以提前对html5了解了一下，算是对得起演讲者。发现html5真的带来了重大的改变。而其中javascript起到的作用是毋庸置疑的，大量的改变其实在上层开发者看来只是增加了一个到两个js对象而已，比如离线存储和webworker等。所以越发发现我选择深入学习js的重要和明智了。java混饭吃，js和动态语言带给我未来。
不多说，简单的介绍一下我目前看到和尝试的部分特性。
1.Web Storage API， 这其实就是大名顶顶的离线存储特性了，离线存储主要有三种，数据库方式现在据说暂时停滞，剩下的是本地长时间存储和本地session存储。顾名思义，前者是一直保存的，可以用来保存如自定义布局等。后者典型应用是购物车啥的，只在当前session内有效。这些以前都是用cookie来完成的，可是cookie有很多缺点，如需要在s和b之间来回传，只有4k等等。
使用方式：
localStorage.data = 5;
localStorage就像个单例，是不是很简单，还有监听事件等。可以监听数据变化。
function displayStorageEvent(e) var logged = "key:" + e.key + ", newValue:" + e.newValue + ",oldValue:" + e.oldValue +", url:" + e.url + ", storageArea:" + e.storageArea alert(logged)； } window.addEventListener("storage", displayStorageEvent, true);
主要就是事件里面的key， newValue ，oldValue了，是不是挺简单的！？
2. Web Worker API
以前我们都说js是单线程的，那么有了这个是不是就是多线程了呢？
webworker 听名字就像java里面的swingworker模式，其实功能也差不多。比较来说，swingworker里面的dobackgroup里面是后台线程池里的线程，不建议访问组件，在webworker里面是不能访问dom api，这个是一个意思。而swingworker里面可以通过发送事件来更改页面，webworker也是这种方案，不同的是swingworker里面done可以回调到EDT，webworker里没发现类似的用法。说这么多，不如上例子啦：
function onMessage(m){ console.info(m.data); } function onError(m){ console.warn(m.message,m); } function init(){ worker = new Worker('msg.js'); worker.addEventListener('message',onMessage,true); worker.addEventListener('error',onError,true); document.getElementById('fire').addEventListener('click',function(){ worker.postMessage('hello ...' + document.getElementById('text')); },true); } window.addEventListener('load',init,true);
这是主页面的js，在main.html中，其中的postMessage在dom元素的事件里被发出，相当于java中的事件派发线程中。而onMessage方法监听后台的线程发送的事件，该事件由worker指定的msg.js 发送，一会我们会看到。
function onMsg(m){ postMessage('worker echo' + m.data); } addEventListener('message',onMsg,true);
这个就是相当于后台的线程，在worker = new Worker('msg.js'); 之后就一直监听main.html中的事件，当点击fire按钮，发送事件，这里监听到。这时是前台向后台通信，后台线程接受到消息，又发送了消息，则这时前台线程中onMessage又监听到了消息，打印到控制台。
这个真的跟swingworker很像，写过swing的童鞋一定会会心一笑的！
暂说这两个特性，下篇待续。
页:
[1]