행, 열, 값, 필터 선택과 행 배치를 저장하여 새로고침하거나 다시 방문할 때 자동으로 복구하는 데모입니다.
getReportDefinition()은 현재 보고서 설정을 객체로 반환합니다. JSON 문자열로 바꾸어 브라우저 저장소나 서버에 보관할 수 있습니다.
setReportDefinition()은 저장한 설정으로 현재 보고서를 복구하고 다시 계산합니다. 원본 데이터는 저장 대상이 아니므로 복구할 피벗에 별도로 준비해야 합니다.
// 보고서 저장 버튼을 누르면 현재 설정을 JSON 문자열로 보관합니다.
const report = AUIPivot.getReportDefinition(myPivotID);
localStorage.setItem("auipivot-demo-report-definition", JSON.stringify(report));
alert("보고서를 저장했습니다. 새로고침하거나 다시 방문하면 자동으로 복구됩니다.");
// 페이지를 열 때 원본 데이터를 준비한 뒤 아래 코드를 실행합니다.
const savedJSON = localStorage.getItem("auipivot-demo-report-definition");
if (savedJSON !== null) {
// 저장한 배치와 필터 등을 적용하고 현재 데이터로 다시 계산합니다.
AUIPivot.setReportDefinition(myPivotID, JSON.parse(savedJSON));
}
행 배치나 필터를 바꾸고 보고서 저장을 누른 뒤 F5로 새로고침해 보십시오. 오른쪽 필드 패널에서 바꾼 배치도 함께 복구됩니다.
이 데모는 localStorage에 보고서 한 개를 저장합니다. 보고서 저장 정보를 지우면 다음 방문부터 기본 보고서가 표시됩니다.
자동차 판매 자료를 불러오는 중입니다.
관련 데모: 행, 열, 값, 필터를 각각 저장하기