在前面一篇文章中我探讨了下在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);
存储,然后在定时的上传日志并情况即可。