Replace localStorage with query parameters for state management

This commit is contained in:
Marshu 2025-06-05 00:00:05 +08:00
parent 2558f0cb61
commit 69f304b101

View file

@ -248,8 +248,6 @@ export default {
this.initializeSortSettings(); this.initializeSortSettings();
}, },
mounted() { mounted() {
// Load sort settings from URL
this.loadSortSettingsFromURL();
// Listen for URL changes // Listen for URL changes
window.addEventListener("popstate", this.handlePopState); window.addEventListener("popstate", this.handlePopState);
}, },
@ -263,46 +261,35 @@ export default {
* @returns {void} * @returns {void}
*/ */
initializeSortSettings() { initializeSortSettings() {
// Load sort settings from URL
this.loadSortSettingsFromURL();
// Set default sort values for groups not configured in URL
if (this.$root.publicGroupList) { if (this.$root.publicGroupList) {
this.$root.publicGroupList.forEach(group => { this.$root.publicGroupList.forEach(group => {
if (group) { if (group) {
// Try to read saved sort settings from localStorage // If sort settings are not defined from URL, use default settings
const savedSettings = this.getSavedSortSettings(group);
if (savedSettings) {
// Apply saved settings
group.sortKey = savedSettings.key;
group.sortDirection = savedSettings.direction;
} else {
// Use default settings
if (group.sortKey === undefined) { if (group.sortKey === undefined) {
group.sortKey = "status"; group.sortKey = "status";
} }
if (group.sortDirection === undefined) { if (group.sortDirection === undefined) {
group.sortDirection = "asc"; group.sortDirection = "asc";
} }
}
// Apply initial sorting // Apply initial sorting
this.applySort(group); this.applySort(group);
} }
}); });
} }
// Watch for new groups being added and initialize their sort state // Watch for new groups being added and initialize their sort state
if (this.$root) { if (this.$root) {
this.$root.$watch("publicGroupList", (newGroups) => { this.$root.$watch("publicGroupList", (newGroups) => {
if (newGroups) { if (newGroups) {
newGroups.forEach(group => { newGroups.forEach(group => {
if (group && group.sortKey === undefined) { if (group && group.sortKey === undefined) {
const savedSettings = this.getSavedSortSettings(group);
if (savedSettings) {
group.sortKey = savedSettings.key;
group.sortDirection = savedSettings.direction;
} else {
group.sortKey = "status"; group.sortKey = "status";
group.sortDirection = "asc"; group.sortDirection = "asc";
}
this.applySort(group); this.applySort(group);
} }
}); });
@ -311,27 +298,6 @@ export default {
} }
}, },
/**
* Get saved sort settings from localStorage
* @param {object} group object
* @returns {object|null} saved sorting settings
*/
getSavedSortSettings(group) {
try {
const groupId = this.getGroupIdentifier(group);
const slug = this.$root.statusPage ? this.$root.statusPage.slug : "default";
const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
const savedSettings = localStorage.getItem(storageKey);
if (savedSettings) {
return JSON.parse(savedSettings);
}
} catch (error) {
console.error("Cannot read sort settings", error);
}
return null;
},
/** /**
* Get sort key for a group * Get sort key for a group
* @param {object} group object * @param {object} group object
@ -363,22 +329,8 @@ export default {
group.sortKey = key; group.sortKey = key;
group.sortDirection = "asc"; group.sortDirection = "asc";
} }
try {
const groupId = this.getGroupIdentifier(group);
const slug = this.$root.statusPage ? this.$root.statusPage.slug : "default";
const storageKey = `uptime-kuma-sort-${slug}-${groupId}`;
const sortSettings = {
key: group.sortKey,
direction: group.sortDirection
};
localStorage.setItem(storageKey, JSON.stringify(sortSettings));
} catch (error) {
console.error("Cannot save sort settings", error);
}
this.applySort(group); this.applySort(group);
this.updateURLSortParams(); this.updateURLSortParams();
}, },