How to store 'File' type data in local Storage in Angular 2

Question

I am working on angular 2 application, and I have 2 component which are siblings(not parent-child components). And I have to pass data from 1 component to another. But that data if of 'File' type. And when I am trying to storing this data in local storage, its storing empty object.

I am sending this data to the 2nd component via resolver and if 2nd component loads the first time, then I extract the data from route.data. But the main problem is I want that data in the 2nd component should remain still after the browser refresh.

How can I hold the File type data in the second component to call API again ???

Answer 1

Use IndexDB to store files. Local storage only accepts String

Refer this link : https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

Angular has inbuilt IndexDB Typings in lib.dom.ts.

There's also a general module availabe: localforage. https://www.npmjs.com/package/localforage