After finding an article, recreating its discovery conditions requires remembering the category and query. I read the current archive’s address-state code and distilled it into a small reusable module. A shared path can retain the chosen conditions instead of returning only to the initial list.
Preserving conditions differs from preserving the same material forever. A growing archive applies saved conditions to current public entries. I explain that boundary through new code handling Korean, punctuation and composition, alongside an anonymous example.
Preserve the selected conditions in the address
The current archive reads category and query conditions from the address and updates it as controls change. That enables reopening the same conditions. Publication or withdrawal can later change the result set, however. An address is not automatically a permanent material snapshot.
I distinguish sharing discovery conditions from preserving a result at a particular time. Applying the same conditions to the latest public archive may suit ordinary reading. Preserving the result itself needs separate storage and time evidence. This module handles condition restoration.
Serialize Korean and punctuation without manual concatenation
Spaces, plus signs and ampersands can change meaning when a query is manually appended to an address. The module sets and reads values through URLSearchParams. The reader’s input and the encoded address string need not have the same visible form.
The new implementation normalizes Unicode and limits query length by code point. Unknown categories resolve to all, and duplicate keys follow the chosen parsing rule. It serializes the two owned conditions rather than acting as a general editor that preserves every tracking parameter.
Wait for committed input during composition
Korean entry has an intermediate composition state. Treating that value as a committed query can make display or restored input disagree with intent. The new attachment checks composition start, end and the input event’s composing state before applying the final value.
An equivalent input event after composition does not unnecessarily rewrite the address. Fake events verified that condition here, not every operating system’s native input method. Application still needs actual composition and result movement reviewed in the target page.
Restore controls from the current location
Initial loading restores input and category from the address. Back navigation into different conditions uses the same reader. Decide whether each edit creates a new history entry or replaces the current one; this module uses replacement for control changes.
Changing an address does not establish that a server serves that path. Refresh and direct entry need their actual route. Search conditions also confer no access permission. Keep personal information and management credentials out of public query strings and retain server publication checks.
Reusable address-state implementation
The code separates parsing, address generation and control attachment. Supply the category identifiers, actual archive path and callback that applies filtering. It also returns cleanup for input, selection and location events. This new example contains no original business identity or article title.
Nine checks covered Korean and punctuation round trips, unknown categories and parameters, duplicate keys, Unicode and length, invalid paths, initial restoration, composition and duplicate events, restored history state, empty conditions and cleanup. Actual browser refresh and back navigation remain unverified.
Explore the implementation
JavaScript · Archive conditions and address state
function categories(values){if(!Array.isArray(values)||values.some(x=>typeof x!=='string'||!/^[a-z][a-z0-9-]*$/.test(x)))throw new TypeError('Explicit category keys required');return new Set(values);}
export function normalizeArchiveQuery(value){return [...String(value||'').normalize('NFKC').trim().replace(/\s+/gu,' ')].slice(0,80).join('');}
export function readArchiveState(search,keys){
const allowed=categories(keys),params=new URLSearchParams(search);
const category=params.get('category')||'';
return {category:allowed.has(category)?category:'',q:normalizeArchiveQuery(params.get('q'))};
}
export function archiveAddress(state,keys,path='/library/'){
if(typeof path!=='string'||!/^\/(?:[a-z0-9-]+\/)*$/.test(path))throw new TypeError('A local directory path is required');
const allowed=categories(keys),params=new URLSearchParams();
if(allowed.has(state.category))params.set('category',state.category);
const q=normalizeArchiveQuery(state.q);if(q)params.set('q',q);
return path+(params.size?'?'+params.toString():'');
}
export function attachArchiveState({input,select,keys,onChange,win=window,path='/library/'}){
let composing=false,closed=false,last='';
function notify(state){const key=JSON.stringify(state);if(key!==last){last=key;onChange({...state,address:archiveAddress(state,keys,path)});}}
function read(){if(closed)return;const state=readArchiveState(win.location.search,keys);input.value=state.q;select.value=state.category;notify(state);}
function commit(event){if(closed||composing||event?.isComposing)return;const state={category:categories(keys).has(select.value)?select.value:'',q:normalizeArchiveQuery(input.value)};const address=archiveAddress(state,keys,path);if(JSON.stringify(state)!==last)win.history.replaceState(win.history.state,'',address);notify(state);}
const start=()=>{composing=true;};const end=()=>{composing=false;commit();};
input.addEventListener('compositionstart',start);input.addEventListener('compositionend',end);input.addEventListener('input',commit);select.addEventListener('change',commit);win.addEventListener('popstate',read);read();
return {read,destroy(){closed=true;input.removeEventListener('compositionstart',start);input.removeEventListener('compositionend',end);input.removeEventListener('input',commit);select.removeEventListener('change',commit);win.removeEventListener('popstate',read);}};
}
Change conditions in an anonymous catalog example
The example uses three newly written synthetic titles to connect category, query and generated address. A simulated history adapter stores and reads conditions without changing the actual website address inside the execution frame. Its generated example path is not presented as an operational destination.
A real page uses its normal History API, actual archive path and a server that serves that route. Public response checks establish the frame and code while new rendered and native-input review remains unverified with Studio Chrome preserved. Condition restoration, correct results and authorization are separate integrations.