Search code examples
cordovaweblocal-storagephonegap-pluginscordova-plugins

Cordova - localStorage in iframe gets cleared on application restart

The index.html file looks like this currently:

<!DOCTYPE html><html><head style="overflow: hidden; margin:0; padding:0;border:0;">
    <meta charset='UTF-8'/>

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'" />
</head>
    <body style="overflow: hidden; margin:0; padding:0; width:100vw; height:100vh;border:0;">
        <iframe src="http://domain.com" style="overflow: hidden; margin:0; padding:0; width:100vw; height:100vh;border:0;"></iframe>
    </body>

    <script type=text/javascript>
        alert(window.localStorage.getItem("aaa"));
        window.localStorage.setItem("aaa", "111")
    </script>
</html>

The alert in the script does get persisted on application restart.

However localStorage the iframe uses, gets cleared on application restart making the use of iframe not equal to the psuedo intention.

Solution

  • Your app's localStorage won't be shared with a remote domain since localStorage is only domain-specific, so you'll need to use a different technique to pass any shared data. Here are a couple of approaches:

    1. Pass the value as a querystring parameter to the iframe URL. You can always append the iframe to the DOM etc. or instead preload the localStorage value first elsewhere if moving to a SPA.

    2. Use the more common technique of having your parent page send a postMessage to the iframe and adding code to the iframe listen for a message event.

    Additional details on how to send/recieve a postMessage:

    https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage