Question

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

JSON文件用作Twitter的typeahead.js的输入。这种类型提示会产生奇怪的行为（参见this post），现在看来json文件存储在本地存储中的方式有问题。

问题似乎在于json文件被转换为本地存储itemhash（我真的没有经历过这个东西）。 json文件的格式为["artist1", "artist2", "artist3", "..."]，如果我使用Chrome开发者工具中的“资源”选项卡，我可以看到json文件被转换并存储在本地存储中，但是如果我粘贴__Artists__itemHash内容在一个txt文件中我可以看到最后文件被切断了。我认为这会导致typeahead问题吗？

来自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中，我确实看到了这两个文件。 artists.json的文件内容似乎被破坏了（在文件中间某处的大量空格中，然后继续输入更多条目）。但是当我在编辑器中粘贴内容时，所有条目似乎都在那里。

events.json的内容似乎没问题。

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

Artists.json并非在所有三种浏览器中都有效。它确实自动提供了一些条目，但不是最后添加的条目（甚至在重置Safari后也没有）。我真的很疯狂......

更新2

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

Answer 1

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

但我确实认为，自文件被切断以来，Twitter的类型保存到本地存储仍然存在问题。我会在typeahead.js's 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
    });
});

json到itemhash被切断了

1 个答案: