Storing the Text Displayed in an Element into A Local Variable


I’m writing an app which uses Firebase to fetch data from a backend database and display in a sort of newsy/blog format. Now, when the user goes offline, I want them to have acess to their latest refresh of the page. To display the data, I have used the async pipe which works smoothly. However, storing the data from the FirebaseListObservable is more of hassle and I haven’t found a nice way to do that so I can store it in local storage. One way I thought of was simply to set the id of the containers of the news to something and then in the typescript file have a function which gathers all the news by their Id and then accesses the text that is displayed at the time. However, I can’t use innerHtml because it just says the innerHtml of a data-bound angular property is null. Is there a clever way to access the data being displayed so that I can store it locally?

Another question would be, is it possible to store a whole template or HTML stuff into localstorage and retrieve it at a later point? Like taking a screenshot basically. What functionality is there for this?

Hassle or not, it’s definitely the way to do this. Kludging together some sort of attempt to snapshot things from the DOM is going to end up being absolutely hideous.

Take a look at angularfire2-offline.

Heard of it. Wouldn’t it be a hassle to rely on outside plugins? Is it possible to store data every 5 minutes or with a specific timer?