localStorage 便签功能实现

2012 - 7 - 28 作者 : Jimco 分类 : JavaScript

       之前利用localStorage写过手机便签应用,因为蛋疼的换了台三星的屌丝级手机,木有了测试的工具,没能继续优化维护下去。而在网页上实现便签功能目前来说似乎没有太大的意义,因为不论是 Firefox 还是 Chrome 都还没能实现 localStorage 数据的同步。贴出代码,仅供参考,希望对感兴趣的同学能有所启发!

var Storage ={
  saveData:function(){//保存数据
    var data = document.querySelector("#post textarea");
     if(data.value != ""){
        var time = new Date().getTime() + Math.random() * 5;//getTime是Date对象中的方法,作用是返回 1970年01月01日至今的毫秒数
        localStorage.setItem(time, data.value + "|" + this.getDateTime());//将毫秒数存入Key值中,可以降低Key值重复率
        data.value = "";
        this.writeData();
      }else{
        alert("请填写您的留言!");
      }
  },
  writeData:function(){//输出数据
    var dataHtml = "", data = "";
    for(var i = localStorage.length-1; i >= 0; i--){//效率更高的循环方法
      data = localStorage.getItem(localStorage.key(i)).split("|");
      dataHtml += "<p><span class=\"msg\">" + data[0] + "</span><span class=\"datetime\">" + data[1] + "</span></p>";
    }
    document.getElementById("comment").innerHTML = dataHtml;
  },
  clearData:function(){//清空数据
    if(localStorage.length > 0){
      if(window.confirm("清空后不可恢复,是否确认清空?")){
        localStorage.clear();
        this.writeData();
      }
    }else{
      alert("没有需要清空的数据!");
    }
  },
  getDateTime:function(){//获取日期时间,例如 2012-03-08 12:58:58
    var isZero = function(num){//私有方法,自动补零
      if(num < 10){
        num = "0" + num;
      }
      return num;
    }
    var d = new Date();
    return d.getFullYear() + "-" + isZero(d.getMonth() + 1) + "-" + isZero(d.getDate()) + " " + isZero(d.getHours()) + ":" + isZero(d.getMinutes()) + ":" + isZero(d.getSeconds());
  }
}

window.onload = function(){
  Storage.writeData();//当打开页面的时候,先将localStorage中的数据输出一边,如果没有数据,则输出空
  document.getElementById("postBt").onclick = function(){Storage.saveData();}//发表评论按钮添加点击事件,作用是将localStorage中的数据输出
  document.getElementById("clearBt").onclick = function(){Storage.clearData();}//清空所有已保存的数据
}

3432 人围观 / 3 条评论 ↓快速评论↓

  • 便签应用已经有很多了,不过博主能贴出代码,很值得学习。

    搜趣软件 2012-07-29 11:19 回复

  • 擦!自个儿评一个,coffee写多了怎么都觉得 js 的写法太特么臃肿、蛋疼了……

    Jimco 2012-07-29 00:21 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈