0

Background:

  1. In android Webview:

    • Html file saved Locally.

  2. When user is Online

    • URL is called and Page A is loaded from Website.
    • certain data is stored in localStorage('X') on Page A.

  3. When user is offline

    • Html Page B (saved locally) is displayed.
    • Page B fetch data from localStorage('X') and store in localStorage('Y').
    • Page B perform operations on localStorage('Y') in JavaScript.

  4. When user is Online again

    • Page A fetch data from localStorage('Y') and store in localStorage('X').

Issue

localStorage('X') value is not passed to localStorage('Y') & vice-versa.

Looking for:

Ways to pass localStorage Value from Website to local HTML file & Vice-Versa

Bharata
  • 13,509
  • 6
  • 36
  • 50
Observer
  • 345
  • 1
  • 4
  • 21
  • localStorage would require both pages to be on the same domain. If that is not the case, you won't be able to share data between them. – Nisarg Shah Jan 15 '18 at 07:07
  • @NisargShah how to pass this value from one domain to another? – Observer Jan 15 '18 at 07:10
  • One of the workarounds would be to use an IFrame inside the locally stored page and PostMessage API. Let me see if there is an answer that explains it, or I will post an answer. – Nisarg Shah Jan 15 '18 at 07:11
  • 1
    @NisargShah can you elaborate about PostMessage API? It would be great help if you provide working example – Observer Jan 15 '18 at 07:21
  • Unfortunately I don't have any experience with WebView, but in principle, the solution in my answer should work well. Try going through the links related to postMessage first. It should be simple enough. – Nisarg Shah Jan 15 '18 at 07:24

1 Answers1

1

You cannot share data across two domains using localStorage.

One of the methods used to share data across domains is through use of postMessage API. In addition to the MDN link, you can find some more details here: How do you use window.postMessage across domains?

In your case, you may need to make the following changes:

  • When user is Online

    • Locally saved Page C is opened
    • Page C opens Page A in an iframe element.
    • Whenever Page A needs to save any data to localStorage, it sends the data via postMessage to the parent page, i.e. Page C. In turn Page C can save the data to localStorage.

  • When user is offline

    • Html Page B (saved locally) is displayed.
    • It can refer to the data in localStorage stored by Page C, because both were opened offline.
Bharata
  • 13,509
  • 6
  • 36
  • 50
Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55