Javascript typeahead.js、localStorage和大型json文件

我有一个大小为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>

预取数据，将其存储在localStorage中，并在客户端上进行搜索：
//等待DOM就绪。。。
$（函数（）{
//将typeahead应用于文本输入框
$（“#我的输入”）。提前键入({
名称：'产品'，
//数据源
预回迁：'../php/products.json'，
//下拉列表中的最大项数列表
限额：10
});
});

但当我启动它时，Chrome说：

未捕获的QuoteExceedeError:未能在“存储”上执行“setItem”： 设置“\uuuu products\uuuu itemHash”的值超出了配额

---

我能做什么？我使用的是typeahead.min.js，您会看到这个错误，因为typeahead预取使用本地存储来存储数据

首先，从用户体验来看，在客户端存储1MB的数据并不是很好

考虑到这一点，您仍然可以使用多个数据集解决这个问题。这只是一个变通方法，可能不是最优雅的解决方案，但它工作得非常完美

我测试的样本数据大于1MB，如下所示

您可以查看示例（打开需要一段时间）

程序：

首先使用

然后将数据分成10000块（这是一个神奇的数字，在不同浏览器中都适用。找到你的）

为每个区块创建一组猎犬，并将所有内容存储在一个数组中

然后用该数组初始化typeahead

代码：

$.getJSON（'data.json'）.done（函数（数据）{//下载整个数据
var数据源=[]；
var数据=数据[‘朋友’]；
var i，j，data，chunkSize=10000；//将数据分成10000个块
对于（i=0，j=data.length；i

我创建了一个包含20个项目、chunkSize为2的演示，只是为了展示多个数据集通常是如何工作的。（搜索肖恩或本杰明）

---

希望这有帮助。

可能是浏览器中设置的首选项、每台计算机上的可用磁盘空间或其他环境差异。相关问题哇，这是一个令人印象深刻的答案，非常感谢。也谢谢你的提示。也许我会尽量不使用LocalStorage..LocalStorage一般来说是好的，但是对于这样大的文件，它可能会有风险。我很高兴这个答案有用

$.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
}