javascript - typeahead.js、localStorage 和大型 json 文件

Question

我有一个大小为 1Mb 的 JSON 文件。我尝试用一​​个像这样的简单示例来实现 typeahead.js:

    <div class="container">
    <p class="example-description">Prefetches data, stores it in localStorage, and searches it on the client: </p>
    <input id="my-input" class="typeahead" type="text" placeholder="input a country name">
  </div>
  
   <script type="text/javascript">
    // Waiting for the DOM ready...
    $(function(){

      // applied typeahead to the text input box
      $('#my-input').typeahead({
        name: 'products',

        // data source
        prefetch: '../php/products.json',

        // max item numbers list in the dropdown
        limit: 10
      });

    });
  </script>

但是当我启动它时，Chrome 说:

Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage':Setting the value of '__products__itemHash' exceeded the quota.

我能做什么？我正在使用 typeahead.min.js

Answer 1

您看到该错误是因为提前预取使用 localStorage 来存储数据。

Firstly, storing 1MB of data on the client side is not really good in term of user experience.

鉴于此，您仍然可以使用多数据集解决问题。这只是一种变通方法，可能不是最优雅的解决方案，但效果很好。

我测试的示例数据 >1MB，看起来像这样

您可以查看示例here (打开需要一段时间)

程序:

1. 首先使用 $.getJSON 下载整个数据
2. 然后将数据分成 10,000 个 block (这对我来说是一个跨浏览器的神奇数字。找到你的)
3. 为每个 block 创建了一组侦探犬并将所有内容存储在一个数组中。
4. 然后用该数组初始化 typeahead

代码:

$.getJSON('data.json').done(function(data) { // download the entire data
  var dataSources = [];
  var data = data['friends'];
  var i, j, data, chunkSize = 10000; // break the data into chunks of 10,000
  for (i = 0, j = data.length; i < j; i += chunkSize) {
    tempArray = data.slice(i, i + chunkSize);
    var d = $.map(tempArray, function(item) {
      return {
        item: item
      };
    });
    dataSources.push(getDataSources(d)); // push each bloodhound to dataSources array
  }
  initTypeahead(dataSources); // initialize typeahead 
});

function getDataSources(data) {
  var dataset = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('item'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data,
    limit: 1 // limited each dataset to 1 because with 76,000 items I have 8 chunks and each chunk gives me 1. So overall suggestion length was 8
  });
  dataset.initialize();
  var src = {
    displayKey: 'item',
    source: dataset.ttAdapter(),
  }
  return src;
}

function initTypeahead(data) {
  $('.typeahead').typeahead({
    highlight: true
  }, data); // here is where you use the array of bloodhounds
}

我创建了一个演示 here有 20 个项目和 chunkSize 为 2 只是为了展示多数据集通常如何工作。 (搜索肖恩或本杰明)

希望这对您有所帮助。