Have you ever encountered a situation where it would be beneficial to save whatever is written to the console across browser sessions? If you have, you know there are not many solutions. I recently decided that localStorage would be a good candidate to implement a solution to this problem with.
logsaver.js
logsaver.js is a lightweight, simple log preservation script. It utilizes the flexibility of JavaScript to replace the default console.log function with a new, customized one. Along with writing messages to the original console.log, this custom console.log also writes messages to the specified localStorage key.
- To start saving console.log messages, call startSavingLog().
- To stop saving console.log messages, call stopSavingLog().
- To clear saved console.log messages, call clearSavedLog().
- To completely remove the localStorage key used by logsaver, call removeSavedLog().
For more information on options and how to use them, checkout the readme.
While you can copy the source below, I strongly recommend grabbing the latest from github here: logsaver.js.
Notes:
- It doesn’t handle objects well. Results in [Object object] appearing in the localStorage key value. This is because localStorage is limited to strings.
- It is possible to exceed the maximum space allocated to you in localStorage. For desktop browsers, Chrome and Firefox have a 10 MB limit, while Safari and IE both have a 5 MB limit. These number differs for mobile browsers. More details. In this event, logsaver.js will stop trying to save the log and display additional error messages in the console.
v0.1.0 Source
/* logsaver.js v0.1.0 https://github.com/chaddotson/logsaver/ (c) 2016 Chad Dotson logsaver.js may be freely distributed under the GNUv3 license. */ (function(root) { 'use strict'; var _root = root; var _localStorageKeyForLog = "console.log.saved"; var _includeTimestamp = false; var _originalLog; function _isEnabled() { return _originalLog !== undefined; } function _zeroPad(str) { str = str + ""; // force it to be a string. return ((str.length < 2) ? "0" + str : str); } function _formatDate() { return this.getFullYear() + "/" + _zeroPad(this.getMonth()) + "/" + _zeroPad(this.getDay()) + " - " + _zeroPad(this.getHours()) + ":" + _zeroPad(this.getMinutes()) + ":" + _zeroPad(this.getSeconds()); } _root.clearSavedLog = function () { if(localStorage[_localStorageKeyForLog]) { localStorage[_localStorageKeyForLog] = ""; return true; } return false; }; _root.removeSavedLog = function () { if(localStorage[_localStorageKeyForLog] !== undefined) { localStorage.removeItem(_localStorageKeyForLog); return true; } return false; }; _root.stopSavingLog = function () { if(!_isEnabled()) { console.log("Not currently saving console.log to localStorage."); return false; } console.log = _originalLog; _originalLog = undefined; console.log("No longer saving console.log to localStorage."); return true; }; _root.startSavingLog = function (options) { options = options || {}; if(_isEnabled()) { _originalLog.call(console, "Already saving console.log. localStorage Key:" + _localStorageKeyForLog); return false; } _localStorageKeyForLog = options.keyForLocalStorage || _localStorageKeyForLog; var timestampFormatter = options.timestampFormatter || _formatDate; _originalLog = console.log; console.log = function(){ _originalLog.apply(console, arguments); var formattedTimestamp = timestampFormatter.apply(new Date()); var message = "\n "+ formattedTimestamp + " :: " + Array.prototype.join.call(arguments, ", "); try { if(!localStorage[_localStorageKeyForLog]) { localStorage[_localStorageKeyForLog] = ""; } localStorage[_localStorageKeyForLog] += message; } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { _originalLog.apply(console, arguments.splice(0, 0, "SAVE FAILED - LOCAL STORAGE QUOTA EXCEEDED")); } else { _originalLog.apply(console, arguments.splice(0, 0, "SAVE FAILED")); } } } _originalLog.call(console, "Now saving console.log to localStorage Key:" + _localStorageKeyForLog); return true; }; })(this);