How to save and load a page with two angular2 components from local storage?

Question

I have been trying to save and load a page with two angular2 components from local storage with the next code but the css from components is never applied.

This is my code to save:

localStorage.setItem('body', JSON.stringify(document.getElementById("body").innerHTML));

This is my code to load:

document.getElementById("body").innerHTML=JSON.parse(localStorage.getItem("body"));

I hope to have explained my problem well

Answer 1

Sorry, you cannot do that. Angular likes to take over a lot of the DOM, so you cannot just replace the entire body of the DOM. However, if instead of doing the entire "body", you did a subset, then you could do this:

<div [innerHTML]="htmlVar">
</div>

Where htmlVar is a variable you loaded with something like:

this.htmlVar = JSON.parse(localStorage.getItem("htmlVar"))

Watch out, by default innerHTML will strip out lots of "unsafe" html. You can reenable most of them by calling DomSanitizer. Please note that you cannot use any Angular features in the html, like links with routerLink.