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

【问题标题】：Store table data using localstorage and passing it to a form使用 localstorage 存储表数据并将其传递给表单
【发布时间】：2013-12-17 11:58:54
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html forms local-storage

【解决方案1】：

您在页面中遇到的问题很少。

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

【讨论】：

好的，现在通过这个 JavaScript 文件包含了 Modernizr：yft.ac/wp-content/themes/yft/js/custom.js?ver=1.2.1，但为了简单起见，我删除了 Modernizr 检查。另外，我已经确保在包含 jQuery 之后放置我自己的 JavaScript。
@KeenanPayne 你再次使用$，使用jQuery 而不是jQuery(function ($) { $('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); }); })
非常感谢您的帮助，我得到了它的工作（有点）。因此，现在如果您转到yft.ac/upcoming-workshops，它会将信息传递到输入字段。您还可以在 </head> 标记末尾之前查看我的代码。我的最后一个问题是，我将如何从按钮所在的正确表格行<tr> 中传递信息？因此，在任何给定的按钮单击时，该按钮行中的信息都会被传递。（如果有道理的话）

【解决方案2】：

一些快速的想法。我相信您的 localStorage 代码应该可以工作.... 但我认为可能发生的情况是浏览器在将值存储在 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"));

希望这会有所帮助！

【讨论】：