How to have separate sessionStorages for iframes on same origin

问题

The standard W3C standard says about localStorages:

Different authors sharing one host name, for example users hosting content on geocities.com, all share one local storage object. There is no feature to restrict the access by pathname. Authors on shared hosts are therefore urged to avoid using these features, as it would be trivial for other authors to read the data and overwrite it.

But for sessionStorages it's said that it does provide separate sessionStorages for tabs and windows even from same origin.

But it seems iframes does share the sessionStorage.

Is there a way to have separate sessionStorages on via iframes on the same origin.

Edit: Since there was confusion if tabs/windows do have separate sessionStorages, here is a sample page. Save the code in a file and open it with two different tabs. Then refresh one tab 5 times and refresh the other tab 1 time. You'll see that the numbers differ.

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
        document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
    </script>
</body>
</html>

Edit2: What I have tried so far is to use the iframe sandbox attribute. But then I got an error within the iframe and I cann't use sessionStorage at all. I had to add sandbox="allow-same-origin". But then the sessionStorage is the same in all iframes again.

Thanks in advance.

回答1:

@adeneo is correct when indicating

the storage container is set to the origin domain, and iframes from the same origin share the same object, even if the iFrame opens a new session

A workaround does not appear to currently exist

<!DOCTYPE html>
<html>
<body>
    <iframe name="one" src="sessionStorageTest.html"></iframe>
    <iframe name="two" src="sessionStorageTest1.html"></iframe>
</body>
</html>

sessionStorageTest.html

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
        document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
    </script>
</body>
</html>

sessionStorageTest1.html

<!DOCTYPE html>
<html>
<body>
    <div id="result"></div>
    <script>
        var i = 0;
          while (++i < 10) {
            sessionStorage.setItem("counter", (parseInt(sessionStorage.getItem("counter"), 10) || 0 ) + 1);
            document.getElementById("result").innerHTML = sessionStorage.getItem("counter");
          }
    </script>
</body>
</html>

demonstrated at plnkr http://plnkr.co/edit/Etel4ToABM6gWOw6qAE5?p=preview

回答2:

There is a workaround if you have ssl. Using https://... to access one document and http://... to access the other will create separate storages for the same origin.

来源：https://stackoverflow.com/questions/35065157/how-to-have-separate-sessionstorages-for-iframes-on-same-origin

标签

javascript

iframe

browser

local-storage

session-storage