如果存储的数据来自iframe，localStorage或sessionStorage是否会在打开的标签中保留

Question

如果我将iFrame加载到用户所在标签的子元素中，以供用户用作从外部位置选择内容的方式，那么我将使用本地或会话存储方法从选择内容中存储该数据关闭iFrame以继续操作后，是否可以访问该数据？ 甚至根本没有这件事？

如果不是，是否还有一种干净的方法将子窗口与父窗口进行通信？

Answer 1

以下是在父窗口和iFrame之间使用localStorage的基本示例。

要进行演示，请在主页的文本框中输入一个值，然后单击“设置数据”。 这将在localStorage中设置值。 单击“读取数据”以将值输出到div。

然后在iFrame的文本框中输入另一个值，然后单击“设置数据”。

最后，再次单击“读取数据”，您将看到iFrame设置的值显示在主页的div中。

main.html：

     <div id="divOne">
        <label>Enter a Value: </label><input id="txtOne" />
        <input type="button" id="btnOne" value="Set Data" onclick="btn1Click(this);" />
        <input type="button" id="btnTwo" value="Read Data" onclick="btn2Click(this);" />
    </div>
    <div id="divTwo"></div>
    <iframe id="ifOne" src="iframe.html"></iframe>

    <script type="text/javascript">
        var div2 = document.getElementById('divTwo');
        var btn1 = document.getElementById('btnOne');
        var btn2 = document.getElementById('btnTwo');
        var input1 = document.getElementById('txtOne');

        function btn1Click(e)
        {
            localStorage.dataItem = input1.value;
        }

        function btn2Click(e) {
            div2.innerHTML = localStorage.dataItem;
        }
    </script>

iframe.html：

    <div>
        <label>Enter a different Value: </label><input id="txtOne" />
        <input type="button" id="btnOne" value="Set Data" onclick="btn1Click(this);" />
    </div>

    <script type="text/javascript">
        var btn1 = document.getElementById('btnOne');
        var input1 = document.getElementById('txtOne');

        function btn1Click(e)
        {
            localStorage.dataItem = input1.value;
        }
    </script>