Save the report to the local storage and restore it on a page refresh

Configuring the report

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to restore the report when refreshing the page</h2>
  <p>
    This example demonstrates how to restore your configurations after
    refreshing the page.
  </p>
  <p>
    One of the possible approaches is to save and restore your report using
    local storage.
  </p>
  <p>
    In this example, Flexmonster subscribes to the
    <code>reportchange</code> event to save the report to the local storage each
    time you update it. We use the <code>getReport</code> method to get the
    report from the component. When the page is refreshed, the report is set
    from the local storage.
  </p>
  <p>
    Feel free to try it yourself: change the data source, set options, configure
    number formatting. Then refresh the page and see how your configurations are
    restored in the component.
  </p>
  <p>
    To learn more about the
    <a href="https://www.flexmonster.com/api/reportchange/" target="_blank"
      >reportchange</a
    >
    event and the
    <a href="https://www.flexmonster.com/api/getreport/" target="_blank"
      >getReport</a
    >
    method, refer to our docs.
  </p>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: getReport()
});

pivot.on('reportchange', () => {
  setNewReport();
});

function setNewReport() {
  let report = pivot.getReport();
  localStorage.setItem('nextReport', JSON.stringify(report));
}

function getReport() {
  let veryFirstReport = {
    dataSource: {
      filename: "data/data.json"
    }
  };
  if (localStorage.getItem("nextReport") === null) {
    return veryFirstReport;
  } else {
    let newReport = localStorage.getItem('nextReport');
    return JSON.parse(newReport);
  }
}