Question

现在我正在尝试使用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的人来说，这是一个很好的启动。

Answer 1

页面上几乎没有问题。

不包括Modernizer库 - 您在代码中使用Modernizr.localstorage
在将jQuery库添加到页面之前添加localStorage.setItem('workshop', cur_workshop);代码 - 因为此代码使用jQuery在包含jQuery之后移动它
看起来你/ wordpress正在调用jQuery.noConflict（） - 所以$不再引用jQuery，所以在你的代码中使用jQuery代替$

Answer 2

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

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

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

localStorage.setItem（“workshop”，JSON.stringify（{'date'：'9/2/2012'，'time'：'8:30 AM'，'Princeton，NJ'}）;

var workshop = JSON.parse（localStorage.getItem（“workshop”））;

希望这有帮助！

使用localstorage存储表数据并将其传递给表单

2 个答案: