从iframe访问iframe的父localstorage变量

Question

我有此页面https://jsfiddle.net/r91bLb7r/9/，该页面用于显示此iframe https://jsfiddle.net/r91bLb7r/8/。

父页面具有我要从iframe访问的localstorage值。

这是父母的代码：

$(document).ready(function () {
    $( "#top" ).click(function() {
        localStorage.setItem("parent", "one");
        alert('I am the top page');
    });
});

这是iframe代码：

$(document).ready(function () {
    $( "#map" ).click(function() {
        var mode = localStorage.getItem("parent");
        alert('I am the iframe'+mode);
    });
});

如何从iframe访问父级的localstorage值？

Answer 1

localstorage是域的属性

localstorage不是页面或iframe的属性，而是域的属性。如果您的主页和iframe来自同一域，则它们将能够访问相同的本地存储

在您的jsfiddle示例中，您希望它能正常工作，因为它们都来自jsfiddle.net-但是您被jsfiddle的工作原理所吸引-实际执行的右下角框实际上是一个iframe本身，从其他域加载： fiddle.jshell.net

因此，在父级上，按照您的硬编码iframe ，执行窗口页面位于，fiddle.jshell.net而iframe来自jsfiddle.net，src它们是不同的域，并且无法访问彼此的本地字符串。

如果将父iframe src更改为https://fiddle.jshell.net/r91bLb7r/8/show/（fiddle.jshell.net与iframe的jsfiddle关联的URI），那么您会发现它可以正常工作。

如果您的实际案例中有两个页面是从不同的域加载的，则它们将无法访问彼此的本地存储-如果它们来自相同的域，则应该没有问题。