Is it possible to save header, footer and body separately for multiple pages?

This is what I am thinking:

const html = $(editor.getHtml());
const header = html.find("header").html();
const footer = html.find("footer").html();

But I don't like the fact that I am using jQuery :/.... any work around this?

I'm not sure is a good idea detaching them in that way. Probably the best approach would be to have something like "Symbols" to keep components in sync but it's not yet implemented in GrapesJS. For now, I'd suggest working on those components (header/footer) separately and adding them later in your pages (something like https://github.com/artf/grapesjs/issues/2061#issuecomment-501476210 or https://jsfiddle.net/5vcc3en6/)