javascript - 从 iframe 访问 iframe 的父 localstorage 变量

Question

我有这个页面https://jsfiddle.net/r91bLb7r/9/我用它来显示这个 iframe https://jsfiddle.net/r91bLb7r/8/ .

父页面在本地存储中有一个值，我想从 iframe 访问它。

这是家长的代码:

$(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 访问父级的本地存储值？

Answer 1

localstorage 是域的属性

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

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

因此在父级上，执行窗口页面来自 fiddle.jshell.net，iframe 来自 jsfiddle.net，根据您的硬编码 iframe src - 它们是不同的域，无法访问彼此的 localstrage。

如果您将父 iframe src 更改为 https://fiddle.jshell.net/r91bLb7r/8/show/ (与您的 iframe 的 jsfiddle 关联的 fiddle.jshell.net URI)，然后您会发现它按预期工作。

如果您的真实案例中有两个页面是从不同的域加载的，那么它们将无法访问彼此的本地存储 - 如果它们来自同一域，您就不会有问题。