Ever wanted to create a browser console log that persists after a page reloads? Sure, that isn’t a problem if you in your developer console, but hear me out. enable the “preserve log” option Say you have a JavaScript framework with a development server that usually hot-reloads when you update files while the server is running. In the few cases where hot reloading isn’t possible and the page has to fully reload, you want to warn your users and explain why this is happening. It’d be nice to just log a warning to the console with , but the moment it shows up in the console, wouldn’t you know, , and the browser clears it. Even if your user is eagle-eyed enough to your warning flash on the screen for a fraction of a second, it certainly isn’t there long enough to actually . console.warn() the page reloads notice read You say that if any of your users don’t know where the “preserve log” button is then that’s their problem, but you’re kinder than that. You’d rather help them fall into . could the Pit of Success As it happens, that’s I ran into the other day when strolling through my favorite open source project, . the very issue Next.js In my naïveté, I first tried just moving the to the line and crossing my fingers, but that didn’t help. I tried googling things like “console log after page reload”, but that only gave me instructions for how to turn on “preserve log”, which I already knew how to do. console.warn() after window.location.reload() Here’s what worked. Where the statement stood before, I instead saved the text content of the warning to the window’s in a key called : console.warn() sessionStorage "consoleWarnAfterReload" sessionStorage.setItem( , ); "consoleWarnAfterReload" "Dear me, the page had to fully reload!" Then, near the top of a file involved in the loading of a new page, I added a few lines that check that same key. If the key exists, it logs the contents of the warning to the console and then removes the item from : sessionStorage sessionStorage (sessionStorage && sessionStorage.getItem( )) { .warn(sessionStorage.getItem( )); sessionStorage.removeItem( ); } if "consoleWarnAfterReload" console "consoleWarnAfterReload" "consoleWarnAfterReload" That did the trick! Know another way to make console logs wait until after a page reloads? Let me know in the comments below—I’d love to hear about it!
![featured image - Making A Browser Console Log Wait Until Page Reloads [A How-To Guide]](https://hackernoon.imgix.net/drafts/afl3zra.png?auto=format&fit=max&w=3840)
