小试localStorage
先推荐个在线ppt，html5rock出品，介绍html5和css3，很是简洁明了，非常赞。另外，还发现了一个可能是目前最好的专业的在线ppt制作网站，感兴趣的朋友可以去看看。
好，言归正传，一个利用localStorage提升用户体验的小应用。浏览国内网站的时候，大多数网站链接都是新标签打开，早期这么做的很大一个原因是追求pv，长期下来国内的网民也早已经习惯了新窗口打开页面。而浏览国外的网站的时候却发现大多都是当前页跳转，因为这样的用户体验更好，不会给用户带来感官上的跳跃感。有些把用户体验推崇至高的人说：弹窗就是邪恶。既然不同的人对不同的窗口打开方式喜好不同，为什么不提供一次让他们选择的机会呢？我记得之前看到过某个网站上提供了一个选择的按钮，当时就对那个网站很有好感。今天就用localstorage实现这个按钮。
代码很简单，贴出如下：
//js部分
[php]
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById('button'),
value="on",
oA=document.getElementsByTagName('a')[0];
try{
value=window.localStorage.getItem('value');
}catch(e){
return;
}
btn.innerHTML=value;
btn.onclick=function(){
if(btn.innerHTML==="on"){
btn.innerHTML="off";
window.localStorage.setItem('value','off');
oA.setAttribute("target","_blank");
btn.title="新窗口打开";
oA.title="新窗口打开";
}else{
btn.innerHTML="on";
window.localStorage.setItem('value','on');
oA.removeAttribute("target");
btn.title="当前窗口打开";
oA.title="当前窗口打开"
}
}
}
</script>
//html部分
<button title="新窗口打开" id="button"></button>
<a href="http://blog.husters.org">去我的博客看看</a>
[/php]
去我的博客看看上面的代码就实现了给用户选择的机会了。当然，你还可以进一步完善下，比如利用正则只对外站链接弹出窗口，站内链接则当前页跳转（很多网站都是这样的，不过不是用的js方法），还可以用cookie/IE userdata去兼容IE 6、7，原生的js操作cookie比较啰嗦，js库比如jquery都有自己的封装方法，也很方便。也可以拓展到其他的功能，比如豆瓣的个人主页模块拖拽排序、wordpress后台的拖拽排序、首次访问引导等，潜力无限呐！~
