Question

我按照本教程使用CSS制作了模态弹出窗口： http://www.script-tutorials.com/css3-modal-popups/

我想知道如何将某人在文本框中输入的值存储为会话数据？我在另一个教程上看到了这段代码，说我想收到有人输入的电子邮件并将其放入会话存储中：

(function () {
    var text = document.getElementById('email');
    text.addEventListener('keyup', function () {
    sessionStorage.text = text.value;
    }, false);
 });

出于某种原因，当我尝试下面的代码时（在另一个页面上，而不是在模式弹出窗口中），它似乎不起作用，文本没有显示

document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;

使用我缺少的模态弹出窗口时是否有一些特殊注意事项？

编辑：

我忘了提到第二行代码在另一个选项卡/窗口中，如果这有所不同。我收到这些错误： TypeError：document.getElementById（...）为null ReferenceError：$未定义

从我到目前为止收集的评论中，似乎你无法通过弹出窗口进行此操作..我想知道是否有一种欺骗方式将其发送回父窗口然后从父窗口，保存会话存储中的文本？

Answer 1

如果您有打开窗口对象的句柄，则可以通过句柄访问其Web存储。

var win = window.open('http://my.foo.bar/', 'myWindowNameHere');
win.sessionStorage.myThing = 'foo';

Answer 2

我拉了存储＆＃39; innerHTML赋值给keyup监听器并立即调用匿名函数：

<input id="email" type="text">
<div id="storage"></div>

<script>

(function () {
    var text = document.getElementById('email');
    text.addEventListener('keyup', function () {
        sessionStorage.text = text.value;
        document.getElementById('storage').innerHTML = 'Your stored value is ' + sessionStorage.text;
    }, false);
}());

</script>

这是一个有效的例子： http://jsfiddle.net/BloodyKnuckles/e6B6x/

Answer 3

我尝试了你的代码，你的java脚本在我的末尾正常工作（我使用了代码警报（text.value））。

而不是将输入的值直接保存到会话中，将该值写入隐藏元素并尝试从那里获取它。在代码“document.getElementById（'storage'）。innerHTML”中，请使用“document.getElementById（'storage'）。value”if element“storage”是一个输入框。

Answer 4

我认为您正在寻找的是window.localStorage：您可以查看浏览器支持它的功能，然后可以编写和检索对象实例，例如： window.localStorage = null;， window.localStorage = [0, 1, 2];， window.localStorage = {'key': 'value'};或 var fromStorage = window.localStorage;。因此，如果您有更多数据需要保留，可以在此处编写列表，集合或地图（对象）等集合。

注意：与Cookies不同，localStorage数据默认情况下不会在任何请求上与通信服务器交换 - localStorage默认只在浏览器中显示。但是，根据浏览器的实现/配置，生命周期和大小可能会更长。

CSS模式弹出会话存储

4 个答案: