BearBlog: Autosave as you write

31 Aug, 2024

This script will auto-save the blog post you are writing. It saves to the browser's local storage. It adds a button you can click to restore the last saved post. Any open blog post editor will be saved every 10 seconds & will overwrite any previous stored post.

You should know:

It only saves one copy and it's dumb. If you're writing 2 posts in 2 different tabs, they will constantly overwrite each other in local storage.
It logs to the browser's developer console, but has no on-page notification that your blog post has been saved.
It saves header & body
It ONLY saves if the post body is 50 characters or more
It only asks for confirmation before restoring if you have written more than 30 characters in the body. (It doesn't check the header text for modifications)

Visit your dashboard at https://bearblog.dev/dashboard/customise/ and put in the following code under 'Dashboard footer content':

<!-- Autosave my blog drafts -->
<script type="text/javascript">
    const restore_btn = document.createElement('button');
    restore_btn.classList.add('rdb_post_restorer');
    restore_btn.setAttribute('onclick', "event.preventDefault();rdb_restore_post();");
    restore_btn.innerText = 'Restore Last Post';
    document.querySelector('.sticky-controls').appendChild(restore_btn);

    function rdb_restore_post(){
        var ebody = document.getElementById('body_content');
        var eheaders = document.getElementById('header_content');
      
        if (ebody.value.length > 30){
            if (!confirm("Overwrite your current post with previous post?"))return;
        }

        ebody.value= localStorage.getItem('body');
        eheaders.innerText = localStorage.getItem('headers');
    }
    function rdb_save_post(){
        setTimeout(function(){rdb_save_post();}, 10000);
        console.log(localStorage);
        var body = document.getElementById('body_content').value;
        var headers = document.getElementById('header_content').innerText;
        if (body.length < 50){
            console.log("Body less than 50 chars. Not saving.");
            return;
        }
        localStorage.setItem('body', body);
        localStorage.setItem('headers', headers);
        console.log("Post saved locally",localStorage);
    }
    setTimeout(function(){rdb_save_post();}, 10000);
</script>

#bearblog