Different localStorage Objects and how to acces them

Question

I am trying to use localStorage to get the value from a form and fill some fields of a second form on a second page. The storing fields part works well but on the second page, there is an iframe and apparently it uses localStorage. When I try to use localStorage on the second page it retrieves the values from this "second" localStorage instead.

    // This displays the correct localStorage info, so on page load, it seems to only be 1 localStorage
    console.log(localStorage);

    // Retrieve session storage fields
    // This comes back as null, second localStorage is loaded?
    var firstName = localStorage.getItem('firstName');
    var lastName = localStorage.getItem('lastname');
    var eMail = localStorage.getItem('eMail');
    var phone = localStorage.getItem('phone');
    var company = localStorage.getItem('company');
    var companyRole = localStorage.getItem('companyRole');

    // This does not work as a result
    j('#first-name').val(firstName);
    j('#last-name').val(lastName);
    j('#phone').val(phone);
    j('#eMail').val(eMail);

When I check the localStorage Object under the "application" Chrom tab, I see 2 Objects and inspecting the first one, I do see my data...I haven't found anything about how to access a different localStorage Object, is that even possible?

Is the iframe address on the same domain as your page? The window.localStorage and window.sessionStorage objects are domain specific. — Cameron Tinker, Jun 17 '20 at 13:40
take a look at this: https://stackoverflow.com/questions/34002044/does-html5-local-storage-store-per-iframe Is the Iframe under your control? — Homungus, Jun 17 '20 at 13:41
The iframe is not under my control no, it's from a different domain. So then I understand it overwrites my Object right? Even if I see 2 of them under the Application tab. — Sergi, Jun 17 '20 at 13:43

Ricardo Rocha · Accepted Answer · 2020-06-17T13:48:36.733

1

As you can check in here:

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

So, if the domain of the page and iframe are the same, so the localstorage data. This means that the localstorage data is saved by domain, and you can CRUD them independently if the code is inside of the main page or the iframe.

But, it also means that if the page is in a different domain than the iframe, you can only access the localstorage of the respective domain. For instance, if your javascript code is inside of an iframe, you cannot access to the localstorage of the main page and vice-versa.

edited Jun 17 '20 at 13:48

answered Jun 17 '20 at 13:43

Ricardo Rocha

14,612
20
74
130

One question though, it seems like the iframe takes a second to load and the console.log shows my localStorage Object, I then set up some variables with the values...This should work right? To load up the iframe with my data being saved on variables to then use it? – Sergi Jun 17 '20 at 13:47
Depend of how you are loading and using your iframe, but I thing it is possible. But check out https://stackoverflow.com/questions/536538/pass-value-to-iframe-from-a-window and see if it answers to your comment question – Ricardo Rocha Jun 17 '20 at 13:53
1

You will still need ownership of the other domain to pass information between cross-origins. – Cameron Tinker Jun 17 '20 at 13:54

score 1 · Answer 2 · answered Jun 17 '20 at 13:49

Local and session storage are specific to the origin. For example, the following origins would produce different local and session storage objects:
https://example.com/
http://example.com/

Even though they are the same domain, they have different protocols. This makes them different origins.

If you do not own the iframe's domain, there is no method for reading or modifying cross-origin storage from your own application. The other origin would need to receive a request to modify storage.

I understand, seeing both storages under the Application tab made me think I could maybe access different ones. Thanks! — Sergi, Jun 17 '20 at 13:52

Different localStorage Objects and how to acces them

2 Answers2