0

每次我在 Wordpress 中保存、更新或删除艺术家（自定义帖子类型）时，我都会使用这篇文章中的代码生成一个 Artists.json 和一个 events.json 文件。我的问题可能与 WP 无关，这就是我将其发布在这里的原因。

JSON 文件用作 Twitter 的 typeahead.js 的输入。这个 typeahead 给出了奇怪的行为（参见这篇文章），现在看来 json 文件在本地存储中的存储方式有问题。

问题似乎出在将 json 文件转换为本地存储 itemhash 的地方（我真的没有这方面的经验）。json 文件的格式为["artist1", "artist2", "artist3", "..."]，如果我使用 Chrome 开发人员工具中的资源选项卡，我可以看到 json 文件被转换并存储在本地存储中，但是如果我将__Artists__itemHash内容粘贴到 txt 文件中，我可以在end 文件被切断。我认为这会导致提前输入的问题？

itemHash 的内容

{
"0":
  {
    "value":"test10",
    "tokens": ["test10"],
    "datum": {"value":"test10"}
  },
"1":
  {
    "value":"test8",
    "tokens":["test8"],
    "datum":{"value":"test8"}
  },
"2":
  {
    "value":"test7",
    "tokens":["test7"],
    "datum":{"value":"test7"}
},

等等...最后文件看起来像这样：

"278":
{
 "value":"Luna // The file ends here...

json 文件中总共有大约 8000 位艺术家，并且该文件生成正确（如：所有艺术家都在那里）。那么也许它与本地存储中的最大文件大小有关？这是我能做出的唯一猜测，希望有人知道这个本地存储的工作原理以及文件被切断的原因。

作为参考，javascript（添加了用于调试的ttl）：

$(document).ready(function() {
    $('input.search-event').typeahead({
        name: 'Events',
        prefetch: '/media/json/events.json',
        ttl: 0,
        limit: 10
    });

    $('input.search-artist').typeahead({
        name: 'Artists',
        prefetch: '/media/json/artists.json',
        ttl: 0,
        limit: 10
    });
});

更新

这些东西每分钟都变得越来越奇怪：

在 Chrome 的开发者工具的网络选项卡中，我没有看到 Artists.json 和 events.json。FF 中的 FireBug 也是如此。

在 Safari 的 Web Inspector 中，我确实看到了这两个文件。艺术家.json 的文件内容似乎被破坏了（在文件中间的某个地方有很多空白，然后它继续有更多条目）。但是当我将内容粘贴到编辑器中时，所有条目似乎都在那里。

events.json 的内容似乎很好。

如果我在 events.json 中添加一个条目，当我重置 Safari 时，这个新条目会显示在 Safari 的 typeahead 字段中，但它不会在 FF 和 Chrome 中显示，因此这可能表示缓存/本地存储错误。

Artists.json 不能在所有三种浏览器中运行。它确实会自动建议一些条目，但不会自动建议最后添加的条目（即使在重置 Safari 后也不建议）。这个我真的要疯了...

更新 2

当我window.localStorage.clear();在 Chrome 的控制台中输入时，本地存储被删除。当我现在重新加载页面时，artist.json 和 events.json 确实会出现在网络选项卡中。进步！然后当我将项目添加到这两个文件时，这些项目不会显示在预先输入字段中，但如果我再次清除本地存储，添加的项目会显示。

4

1 回答 1

0

我最终删除了 name 和 ttl 属性，以防止 typeahead 将 json 保存在本地存储中。无论如何都会更好，因为 json 文件每周都会更新，如果不是每天的话。

但我确实认为自从文件被切断以来，Twitter 的预输入保存到本地存储仍然存在问题。我会在typeahead.js 的 github上报告这个。

新JS

$(document).ready(function() {
    $('input.search-event').typeahead({
        prefetch: '/media/json/events.json',
        limit: 10
    });

    $('input.search-artist').typeahead({
        prefetch: '/media/json/artists.json',
        limit: 10
    });
});
于 2013-09-11T13:33:57.413 回答