前端日志探讨二

     在前面一篇文章中我探讨了下在IE浏览器的情况下使用前端日志，但我们知道很多人不使用IE作为默认浏览器。

     下面探讨下在高版本chorme浏览器里的日志存储和发送。

      由于chorme浏览器为了安全问题在今年已经停止使用插件这种方式，导致现在不允许在chorme中使用插件来更改我们本地的文件这样的操作了。--（吐槽一下，禁用插件导致了我的报表打印功能无法使用了。原来的排版漂亮的报表现在无法再chorme上使用，头疼）

但是由于chorme是一款功能强大的浏览器，首先他为我们提供了一些高级特性。如我们现在要用到的本地数据存储功能。在chorme中我们可以轻松的使用。

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。由于日志是要长期存储的，所以我们目前只考虑localStorage这种方案，当然使用sessionStorage也是可以的，不过要求你快速的将日志传回到持久层，存放起来。这导致有些日志由于时间问题或没有及时机制无法上传。

      localStorage:

       if(window.localStorage){
           alert('This browser supports localStorage');
          }else{
             alert('This browser does NOT support localStorage');
          }

本地存储有多重方法，这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。

我们可以使用一个日期函数来表明日志的日期等，下面代码如下：

Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}

使用时简单使用：

var storage = window.localStorage;

var newTime=new Date();

storage.setItem(newTime.format ('yyyy-mm-dd')+'username',0);

存储，然后在定时的上传日志并情况即可。