永不丢失的评论 – 打造wordpress评论框的本地化存储方案

/*!

 * @public

 * @update 2010/12/11, liuqiqi imqiqiboy#gmail.com http://www.qiqiboy.com

 * @param <String> key 键值

 * @param <String> value 要存储的值

 * @call 设置新值storeLocalData(key, value); || 清除某个存储storeLocalData(key, ''); ||

 *       获取某个存储storeLocalData(key); || 清除所有存储storeLocalData(); 

*/

var storeLocalData=function(key, value) {

    try {

        //先试着获取对localStorage的引用

        var storage=window.localStorage || window.globalStorage && window.globalStorage[location.hostname];

        if (storage){//如果获取localStorage对象成功，说明浏览器支持localStorage

            if (value !== undefined)//如果存在value，表示是要设置存储操作

                value == "" ? storage.removeItem(key) : storage[key] = value;

            else if (key !== undefined)//存在key值，就返回相应的存储值

                return storage[key] || "";

            else throw new Error();//抛出异常，使代码流跳到最后清除存储部分

        }else if (/MSIE/i.test(navigator.userAgent)) {//确保是IE，IE才能使用userData存储

            var userData = document.getElementById('userData') || document.createElement('input');//试着查找‘userData’这个节点，没有就开始创建

            if (!userData.id) {//没有ID值就说明页面上无此节点

                userData.id="userData";

                userData.style.display='none';

                userData.style.behavior='url(#default#userData)';//behavior:url(#default#userData)'表示开启user Data存储

                document.body.appendChild(userData);//加载到页面中

            }

            try {

                userData.load("oXMLBranch")//尝试载入存储的数据

            } catch(e) {}

            if (value !== undefined) {//这里同上面，其实也是通过value判断是设置新值还是返回存储的值

                value == "" ? userData.removeAttribute(key) : userData.setAttribute(key, value);

                userData.save("oXMLBranch");//保存

            }else if (key !== undefined)//存在key值，就返回相应的存储值

               return userData.getAttribute(key) || "";

           else throw new Error();//抛出异常，使代码流跳到最后清除存储部分

        } else return false;//操作失败

        return true;//设置成功

    } catch(e) {//捕获到上面抛出的错误

       if(storage){

            storage.clear();//使用W3C的方法清除存储

        } else if (userData) {

            var attrs = userData.xmlDocument.firstChild.attributes, i;

            while(i = attrs.length){//循环清除xml文件里的每个属性里保存的值

                var j = attrs[--i].nodeName;

                userData.removeAttribute(j);

            }

            userData.save("oXMLBranch");

        }

    }

}

//以下为对localStorage测试的补充,部署到wordpress时不必添加此段代码

//设置一个新的存储

storeLocalData('new_key', 'new_value');//即保存了一个名称为new_key，内容为new_value的存储

//获取某个存储

storeLocalData('new_key');//即会返回new_key对应的值，如果new_key上存储了内容，就返回存储的内容，否则返回空字串

//删除某个存储

storeLocalData('new_key', '');//即将某个存储设置为空，即会删除它

//删除页面上所有的存储

storeLocalData();//传递任何参数，即会执行清除操作；你可以任何时候通过在浏览器的JS控制台上输入此函数来执行清理。

//查看输出页面上所有的storage

var storage = window.localStorage;

if(!storage.length)document.write('本页面上无存储内容！');

for(var i=0; i<storage.length; i++){

    //输出格式为 "键值 = 存储值"

    document.write(storage.key(i)+' = '+storage.getItem(storage.key(i))+'<br/>');

}

//这些代码务必放在评论框下方，否则就使用window.onload包含调用，或者jQuery的ready方法调用

function $(id){

    return document.getElementById(id);

}

function addListener(e, n, o, u) {

    if(e.addEventListener) {

        e.addEventListener(n, o, u);

        return true;

    } else if(e.attachEvent) {

        e['e' + n + o] = o;

        e[n + o] = function() {

            e['e' + n + o](window.event);

        };

        e.attachEvent('on' + n, e[n + o]);

        return true;

    }

    return false;

}

/*通过onchange绑定存储行为方式，已弃用该方法，新方法在下边

if($("comment")){

    //这里用作存储键值我使用了 'storage_'+数字ID 的方式，因为我测试好像数字字串不能作为localStorage的属性值，原因我暂时不明，有了解的可以提点一下

    $('comment').value=storeLocalData('storage_'+$('comment_post_ID').value);

    addListener($('comment'),'change',function(){//绑定 onchange 事件

        storeLocalData('storage_'+$('comment_post_ID').value, $('comment').value);

    },false);

    addListener($('commentform'),'submit',function(){//绑定评论表单的 onsubmit 事件

        storeLocalData('storage_'+$('comment_post_ID').value, '');//这里置为空就可以了

    },false);

}

*/

//以下内容为2010.12.14日更新

if($("comment")){

    //这里用作存储键值我使用了 'storage_'+数字ID 的方式，因为我测试好像数字字串不能作为localStorage的属性值，原因我暂时不明，有了解的可以提点一下

    var local=storeLocalData('storage_'+$('comment_post_ID').value), post_id=$('comment_post_ID').value, //获取之前存储的内容和文章id

        storeTimer, new_value, old_value=local;//声明定时器标志，新值、旧值的变量

    $('comment').value= local === undefined? '' : local;//将评论框内容更新为存储的值

    addListener($('comment'),'focus',function(){//绑定聚焦事件

        if(!storeTimer)

        storeTimer=setInterval(function(){//声明一个定时器，每秒执行一次

            //if语句的执行会先获取评论框中的值，然后和旧值比较，不同就存储新值，然后就新值赋给旧值，以便下次继续和再次取得新值比较

            if((new_value=$('comment').value)!==undefined && new_value!=old_value && (old_value=new_value)!==undefined)

                storeLocalData('storage_'+post_id, new_value);

        },1000);

    },false);

    addListener($('comment'),'blur',function(){

        clearInterval(storeTimer);storeTimer=undefined;//焦点移开就清楚定时器

    },false);

    addListener($('commentform'),'submit',function(){//绑定评论表单的 onsubmit 事件

        storeLocalData('storage_'+$('comment_post_ID').value, '');//这里置为空就可以了

    },false);

}