With regard to the SEO aspect of your question it is unlikely to affect how Google crawls and indexes your site as Google is able to interpret the way your JavaScript operates and affects the page in order to accurately gauge what your end users will see for more accurate and relevant indexing and ranking.
Now just because Google "can" crawl and index your JavaScript powered pages does not necessarily mean that you should make them JavaScript powered. in the grand scheme of things shifting your header and footer html into JavaScript for caching purposes is not going to dramatically impact on your page load times which is the main purpose of caching content. You are also more likely to make your site for all intents and purposes unusable for end users who choose not to have JavaScript enabled. There are also quite a few users out there who disable caching or run automatic tools on their computers to clear their browser cache fairly regularly (I do mine weekly) for various reasons as part of general computer maintenance. By embedding your html code in the JavaScript not only are you not benefiting from caching in these instances but you are taking even longer now to display the page to the user as the JavaScript file needs to be downloaded to the end user first and then processed before the static HTML can be added to the page.
The only reason I would embed static HTML into a JavaScript file is for ease of maintenance where certain HTML has to be added to multiple websites for branding purposes (such as university or enterprise websites).
So short answer is should not affect your SEO but certainly not recommended practice.