Question

感谢上一个线程HTML 5 History API with PopState and AJAX keeps reloading the page上的@Kal —我设法使用history.pushState和popstate创建一个单页应用程序来浏览浏览器的后退和前进按钮，效果很好。 / p>

现在，当我使用更大的JSON对象运行代码时，收到错误消息：
DataCloneError：无法克隆对象。

（经过大量阅读）我能想到的唯一原因以及发生此新错误的原因是因为我使用的是更大的数据集（JSON对象）。

我认为我可能需要使用sessionStorage来保存更多数据，我需要找出导致此问题的原因-很多测试都没有成功：（

我的问题
如何在下面添加和使用sessionStorage，以便可以处理大对象？

还是错误是其他原因？

$(function() {
"use strict";

    // Get results on first load
    $.ajax({
        url: 'https://swapi.co/api/people/',
        dataType: 'json'
    })
      .then(function(data) {
          var template = $('#r_tpl').html();
          var html = Mustache.render(template, data);
          $('#results').html(html);

          window.history.replaceState(
            { category: 'Select Category', data },
            null,
            ''
          );
    });

    // Get results on change to dropdown
    $(document).on('change', '#category', function(e){
      e.preventDefault();
      var category = this.value; // get selected value
      $.ajax({
        url: 'https://swapi.co/api/' + category + '/',
        dataType: 'json'
      })
        .then(function(data) {
          var template = $('#r_tpl').html();
          var html = Mustache.render(template, data);
          $('#results').html(html);

          history.pushState(
            // data
            // title
            // url
            { category, data },
            category,
            window.location.pathname + '?category=' + category
          );
      });
    });

    window.addEventListener('popstate', function(event) {
        var template = $('#r_tpl').html();
        var html = Mustache.render(template, event.state.data);
        $('#results').html(html);
        $('#category').val(event.state.category);
      });

});

Thaks，Barry

DataCloneError：无法克隆对象。帮助将sessionstorage与history.pushState一起使用

0 个答案: