improve localStorage for better user experience (#5145)

ts/webui/src/App.tsx

@@ -82,6 +82,8 @@ class App extends React.Component<{}, AppState> {
     }
 
     async componentDidMount(): Promise<void> {
+        localStorage.removeItem('columns');
+        localStorage.removeItem('paraColumns');
         await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
         this.setState(state => ({
             experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,

ts/webui/src/components/experiment/trialdetail/ChangeColumnComponent.tsx

 import * as React from 'react';
 import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { EXPERIMENT } from '@static/datamodel';
+import { Storage } from '@model/localStorage';
 
 /**
  * changeColumnComponent file is for [customized table column, customized hyper-parameter graph yAxis]
@@ -67,9 +69,19 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
         const selectedColumns = allColumns.map(column => column.key).filter(key => currentSelected.includes(key));
         onSelectedChange(selectedColumns);
         if (whichComponent === 'table') {
-            localStorage.setItem('columns', JSON.stringify(selectedColumns));
+            const storage = new Storage(
+                `${EXPERIMENT.profile.id}_columns`,
+                JSON.stringify(selectedColumns),
+                30 * 24 * 60 * 60 * 1000
+            );
+            storage.setValue();
         } else {
-            localStorage.setItem('paraColumns', JSON.stringify(selectedColumns));
+            const storage = new Storage(
+                `${EXPERIMENT.profile.id}_paraColumns`,
+                JSON.stringify(selectedColumns),
+                30 * 24 * 60 * 60 * 1000
+            );
+            storage.setValue();
         }
         this.hideDialog();
     };

ts/webui/src/components/experiment/trialdetail/chart/Para.tsx

@@ -8,6 +8,7 @@ import { SingleAxis, MultipleAxes } from '@static/interface';
 import { Trial } from '@model/trial';
 import ChangeColumnComponent from '../ChangeColumnComponent';
 import { optimizeModeValue } from './optimizeMode';
+import { getValue } from '@model/localStorage';
 
 import 'parcoord-es/dist/parcoords.css';
 import '@style/button.scss';
@@ -56,9 +57,10 @@ class Para extends React.Component<ParaProps, ParaState> {
             customizeColumnsDialogVisible: false,
             availableDimensions: [],
             chosenDimensions:
-                localStorage.getItem('paraColumns') !== null
+                localStorage.getItem(`${EXPERIMENT.profile.id}_paraColumns`) !== null &&
+                getValue(`${EXPERIMENT.profile.id}_paraColumns`) !== null
                     ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                      JSON.parse(localStorage.getItem('paraColumns')!)
+                      JSON.parse(getValue(`${EXPERIMENT.profile.id}_paraColumns`)!)
                     : []
         };
     }

ts/webui/src/components/experiment/trialdetail/table/TableList.tsx

@@ -16,6 +16,7 @@ import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction'
 import PaginationTable from '@components/common/PaginationTable';
 import CopyButton from '@components/common/CopyButton';
 import TooltipHostIndex from '@components/common/TooltipHostIndex';
+import { getValue } from '@model/localStorage';
 
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -54,9 +55,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
         this.state = {
             displayedItems: [],
             displayedColumns:
-                localStorage.getItem('columns') !== null
+                localStorage.getItem(`${EXPERIMENT.profile.id}_columns`) !== null &&
+                getValue(`${EXPERIMENT.profile.id}_columns`) !== null
                     ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                      JSON.parse(localStorage.getItem('columns')!)
+                      JSON.parse(getValue(`${EXPERIMENT.profile.id}_columns`)!)
                     : defaultDisplayedColumns,
             columns: [],
             searchType: 'id',

ts/webui/src/static/model/localStorage.ts

+export interface StorageFormat {
+    expire: number;
+    time: number;
+    value: string;
+}
+
+export const getValue = (key): null | string => {
+    const val = localStorage.getItem(key);
+    if (!val) {
+        return null;
+    }
+    const data = JSON.parse(val) as StorageFormat;
+    if (Date.now() - data.time > data.expire) {
+        localStorage.removeItem(key);
+        return null;
+    }
+    return data.value;
+};
+
+class Storage {
+    key: string = '';
+    value: string = '';
+    expire: number = 0;
+
+    constructor(key: string, value: string, expire: number) {
+        this.key = key;
+        this.value = value;
+        this.expire = expire;
+    }
+
+    public setValue(): void {
+        const obj: StorageFormat = {
+            value: this.value,
+            time: Date.now(),
+            expire: this.expire
+        };
+        localStorage.setItem(this.key, JSON.stringify(obj));
+    }
+}
+
+export { Storage };