0

现在我正在尝试使用 HTML5 的 localStorage API 从表中获取一个值，并将该值传递给一个表单。

例如，当用户在此表单上单击“今天注册”时：http: //yft.ac/upcoming-workshops/，我想要给定行（日期、时间、位置）中的信息，以及要存储在其上方的标题（例如：YFT Admissions Insights），然后显示在此页面上的“感兴趣的研讨会”字段中：http: //yft.ac/contact-us/。

我真的不是 JavaScript 最好的，但这是我目前所拥有的：

联系我们：

$('input#workshop').text( localStorage.getItem('workshop') );

即将到来的研讨会页面：

$('body').on('click', 'a.button', function(){
    var index = $(this).parents('table').index('table');
    var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text();
    localStorage.setItem('workshop', cur_workshop);
});

我只是试图把它拼凑起来，所以上面的代码不起作用，但我希望这对于可能更精通 JavaScript 的人来说是一个很好的起点。

4

2 回答 2

1

一些快速的想法。我相信您的 l​​ocalStorage 代码应该可以工作....但我认为可能发生的情况是浏览器在将值存储在 localStorage 之前正在加载联系页面。您可能想要做的是删除超链接并将点击处理程序绑定到 div、span 或只是一个按钮元素。在点击事件处理程序中使用 window.location = "xyz"; 将值设置为 localStorage 后。

同样，这可能不是真正的答案..但尝试使用非超链接元素并查看。你也可以做 e.preventDefault; 然后存储该值，然后执行 window.location 的事情。这是一种渐进增强的方法。

至于 localStorage，我鼓励您尝试将值存储在 JSON 对象中，而不是多个项目中。

localStorage.setItem("workshop", JSON.stringify({'date' : '9/2/2012', 'time': '8:30AM', 'Princeton, NJ'}));

var Workshop = JSON.parse(localStorage.getItem("workshop"));

希望这可以帮助！

于 2013-09-04T01:02:17.007 回答
1

您在页面中几乎没有问题。

  1. 不包括 Modernizer 库 - 您Modernizr.localstorage在代码中使用
  2. 代码在localStorage.setItem('workshop', cur_workshop);jQuery 库添加到页面之前添加 - 因为此代码使用 jQuery 在包含 jQuery 后移动它
  3. 看起来你/wordpress 在某个地方调用 jQuery.noConflict() - 所以$不再引用 jQuery 所以在你的代码中使用jQuery而不是$
于 2013-09-04T00:32:25.157 回答