如果存儲的數據來自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>