Google Docs Like Autosave

I can’t for the life of me figure out how I can save a textarea that is linked to a model every 30 seconds and also on blur without a save button and without hitting the database on every keystroke (or even deferred)… any help or guidance would be appreciated. Is there a wire:onBlur or other method that I just can’t locate? Has anyone else solved this?

I am building an application that has some long-form content, and I want to take some worry out of the equation for users so their work is saved every so often without their interaction. I am doing this currently in Trix editor, and although I have the editor working great and saving when a submit is happening, I can’t figure out how to get it to so what I really want (as well as when I need to submit).

<div
    class="rounded-md"
    x-data="{
        value: @entangle($attributes->wire('model')),
        isFocused() { return document.activeElement !== this.$refs.trix },
        setValue() { this.$refs.trix.editor.loadHTML(this.value) },
    }"
    x-init="setValue(); $watch('value', () => isFocused() && setValue())"
    x-on:trix-change="value = $event.target.value"
    {{ $attributes->whereDoesntStartWith('wire:model') }}
    wire:ignore
>
    <input id="x" type="hidden">
    <trix-editor x-ref="trix" input="x" class="form-textarea block w-full min-h-screen transition duration-150 ease-in-out border-0 focus:outline-none"></trix-editor>
</div>

(you can see the behavior on creating a new forum post here (with the check mark in the bottom corner).