JS實現普通報表快取上一次瀏覽器查詢參數

1.1 版本

1.2 問題描述

普通報表在開啟時希望參數面板中的參數元件的值可以預設是上一次頁面關閉前最後一次查詢所選擇的值。

1.3 解決方案

1）每次在頁面關閉時將參數值儲存到瀏覽器快取中（適用於非FS平台），或每次點選查詢後將參數值儲存到瀏覽器快取中（適用FS決策平台）。

2）報表開啟時從瀏覽器快取中將參數值讀取出來並指派給對應的元件。

注1：不支援決策報表和行動端報表。 

注2：該方案僅支援同一台電腦下讀取快取，不同電腦快取的結果也不一致。

1. 開啟需要配置的範本，點選右上角「組件設定」中「para」組件。

2. 點選「新增事件」新增一個「初始化後」事件。

3. 在事件編輯框中新增參數，並寫入對應的JavaScript腳本。

其中，參數名為fr_name，參數值為公式reportName。

JavaScript 程式碼如下：

// 監測到瀏覽器頁面關閉時將參數欄所有元件當前所選的值儲存到localStorage中，將fr_name參數encodeURL後轉為Base64編碼作為快取的key值
window.onbeforeunload = function() {
	localStorage.setItem(btoa(encodeURI(fr_name)), _g().getParameterContainer().getSelectValue());
};

// 頁面初始化後，根據key值讀取快取值，若存在則將對應的值指派給對應的元件
setTimeout(function() {
	var storage = localStorage.getItem(btoa(encodeURI(fr_name)));
	if (storage) {
		var storageJson = JSON.parse(storage);
		for (var key in storageJson) {
			_g().getParameterContainer().getWidgetByName(key).setValue(storageJson[key]);
		}
	};
}, 10);
显示代码

1. 開啟需要配置的範本，點選右上角「組件設定」中「para」組件。

2. 點選「新增事件」新增一個「初始化後」事件。

3. 在事件編輯框中新增參數，並寫入對應的JavaScript腳本。

注：若僅指定部分參數讀取快取值或元件之間存在聯動關係，推薦使用第二種方案

其中，參數名為fr_name，參數值為公式reportName。

JavaScript 程式碼如下：

// 監測到瀏覽器頁面關閉時將參數欄所有元件當前所選的值儲存到localStorage中，將fr_name參數encodeURL後轉為Base64編碼作為快取的key值
window.onbeforeunload = function() {
	localStorage.setItem(btoa(encodeURI(fr_name)), _g().getParameterContainer().getSelectValue());
};

// 頁面初始化後，根據key值讀取快取值，再根據指定的元件順序進行指派
setTimeout(function() {
	var storage = localStorage.getItem(btoa(encodeURI(fr_name)));
	if (storage) {
		var storageJson = JSON.parse(storage);
		var widgetsKeys = ["AREA","PROVINCE","CITY"]; // 指定需要預設指派的參數及參數順序
		widgetsKeys.forEach(key=>{_g().getParameterContainer().getWidgetByName(key).setValue(storageJson[key]);})
	};
}, 10);
显示代码

目前開放的API中並未包含決策平台頁籤關閉事件，所以無法監測到報表在決策平台中關閉的事件。因此，如果希望實現同樣的效果，則需要在每次點選查詢按鈕時就將當前的元件參數值全部快取到瀏覽器中。

具體操作除範例一與範例二中的內容外，需補充以下步驟：

1. 選中「查詢」按鈕。

2. 點選「新增事件」，並新增一個「點選」事件。

3. 在事件編輯框中新增參數，並寫入對應的JavaScript腳本。

其中，參數名為fr_name，參數值為公式reportName。

JavaScript 程式碼如下：

// 將fr_name參數encodeURL後轉為Base64編碼作為快取的key值,參數欄所有元件當前所選的值作為value值
localStorage.setItem(btoa(encodeURI(fr_name)),_g().getParameterContainer().getSelectValue());

1）範例一：

點選下載範本：JS實現範本開啟預設帶出上一次查詢的參數條件（通用版）.cpt

2）範例二：

點選下載範本：JS實現範本開啟預設帶出上一次查詢的參數條件（指定元件及順序版）.cpt

3）範例三：

點選下載範本：JS實現範本開啟預設帶出上一次查詢的參數條件（決策平台版）.cpt