在（无框架）基于 Javascript 的单页应用程序中，URL queryString 更新，但脚本无法解析更新后的 URL

Question

I'm learning about state management in the context of frameworkless javascript-based apps and thought I'd experiment with keeping a complete record of state in the URL queryString .

I've developed a setup where the URL queryString contains a small number of parameters, some corresponding to boolean variables , others to string variables .

Any user-interaction with the UI initiates a two-step process:

1. the user interaction updates the corresponding parameters in the queryString
2. immediately after the queryString updates, another script parses the queryString to translate the new representation of the app state into real changes across the app

Essentially, the queryString operates as the single source of truth ( SSOT ) at the heart of the app.

Parsing the queryString in Step 2 provides the settings to populate various custom data-* attributes with values and initiate various functions throughout the app. This is probably more easily demonstrated with an example, so...

Simplified Example:

 const section = document.getElementsByTagName('section')[0]; const div1 = document.getElementsByClassName('div1')[0]; const div2 = document.getElementsByClassName('div2')[0]; let queryString = '?'; const appState = { 'div1-color': 'red', 'div1-shape': 'circle', 'div2-color': 'blue', 'div2-shape': 'square' }; const updateQueryString = (appState) => { const queryStringArray = []; for (let appStateKey in appState) { queryStringArray.push(appStateKey + '=' + appState[appStateKey]); } queryString = '?' + queryStringArray.join('&'); console.log('QueryString: ' + queryString); // ^^^ // THIS FINAL LINE IS FOR THE SAKE OF THIS EXAMPLE // IN THE REAL APP, THE FINAL LINE IS: // window.history.pushState({}, document.title, 'https://example.com/?' + queryString); } const updateApp = (queryString) => { let urlParams = new URLSearchParams(queryString); for (let entry of urlParams.entries()) { let key = 'data-' + entry[0]; let value = entry[1]; section.setAttribute(key, value); } } const updateAppState = (e) => { const target = e.target.className; switch (e.type) { case ('mouseover'): appState[target + '-color'] = (appState[target + '-color'] === 'red')? 'blue': 'red'; break; case ('click'): appState[target + '-shape'] = (appState[target + '-shape'] === 'circle')? 'square': 'circle'; break; } updateQueryString(appState); updateApp(queryString); } div1.addEventListener('mouseover', updateAppState, false); div1.addEventListener('click', updateAppState, false); div2.addEventListener('mouseover', updateAppState, false); div2.addEventListener('click', updateAppState, false);

 h2 { font-family: sans-serif; font-size: 16px; } [class^="div"] { display: inline-block; margin-right: 12px; width: 80px; height: 80px; cursor: pointer; transition: all 0.6s linear; } [data-div1-color="red"].div1 { background-color: rgb(255, 0, 0); } [data-div1-color="blue"].div1 { background-color: rgb(0, 0, 191); } [data-div2-color="red"].div2 { background-color: rgb(255, 0, 0); } [data-div2-color="blue"].div2 { background-color: rgb(0, 0, 191); } [data-div1-shape="circle"].div1 { border-radius: 50%; } [data-div1-shape="square"].div1 { border-radius: 0; } [data-div2-shape="circle"].div2 { border-radius: 50%; } [data-div2-shape="square"].div2 { border-radius: 0; }

 <h2>Mouseover to change colour, click to change shape:</h2> <section data-div1-color="red" data-div1-shape="circle" data-div2-color="blue" data-div2-shape="square" > <div class="div1"></div> <div class="div2"></div> </section>

The example above works as intended, because, in order to demonstrate the setup on Stack Overflow, I don't want to start messing about with updating URLs while the browser is pointing at stackoverflow.com .

The issue I have in the real app is that even though the queryString updates, it is never being parsed correctly.

The data parsed from the queryString suggests the queryString isn't updating at all.

Yet, when I check the queryString , it has definitely updated.

If the queryString is updating, why isn't it being parsed correctly?

Answer 1

I spent some more time thinking about this.

I concluded that, most likely, what was happening in this code:

updateQueryString(appState);
updateApp(window.location.search);

is that in the first function

updateQueryString(appState)

the final line

window.history.pushState({}, document.title, 'https://example.com/?' + queryString);

hasn't completed updating the current URL, before the second function

updateApp(window.location.search)

reaches up and grabs window.location.search .

So, in summary, where I thought I was dealing with a synchronous process , I'm actually looking at an asychronous process .

---

Solution Attempt #1 - Change the Single Source of Truth (SSOT)

It occurred to me that while the URL didn't update almost instantaneously, the appState object did .

Which raised the possibility that I might use the appState object as the SSOT instead of the queryString .

And then the appState would inform both the queryString and provide the new representation of the app state which could be translated into real changes across the app.

I rejected this possible solution for two reasons:

1. I didn't want it to be the case that, in the event of a miscommunication, the state of the app didn't exactly align with the representation of the app state in the queryString . This would be impossible where the queryString played the role of SSOT , but it would become a distinct possibility where the queryString was only a translation (or mis-translation ) of the appState object .

2. In the example above, the appState object plays the role of a helper , ensuring that the state resulting from any user interaction is correctly represented in the queryString . Because the example is a simple one, the appState object represents the state of the app in its entirety (effectively duplicating the representation in the queryString ). But I definitely want it to be the case that the helper may communicate to the queryString only the updated parts of the state. If the appState object were to adopt the role of SSOT then it would always need to represent the entire state of the app.

---

Solution Attempt #2 - Use the popstate event

Since I only want to invoke

updateApp(window.location.search)

after the queryString has updated, I can straightforwardly use window.onpopstate . The easiest way to do this would be to add an Event Listener as the very last line of updateQueryString(appState) , like so:

window.history.pushState({}, document.title, 'https://example.com/?' + queryString);
window.addEventListener('popstate', updateApp);

That way, updateApp() only starts executing, after window.history.pushState has completed.

---

Final Solution

Solution #2 is perfectly good, but it struck me that I could invoke updateApp even sooner by regarding window.history.pushState as a side-effect (rather than the main outcome) of updateQueryString(appState) and rethink the function so that the last two lines of the function would include this return statement, instead:

window.history.pushState({}, document.title, 'https://example.com/?' + queryString);
return queryString;

This means that updateApp() doesn't even have to wait for window.history.pushState to complete.

Instead, updateApp() can work straight away on the data returned by updateQueryString(appState) , even while that function is still updating the queryString .

Solution:

Change the first line of updateApp() from:

let urlParams = new URLSearchParams(window.location.search);

to:

let urlParams = new URLSearchParams(updateQueryString(appState));

Replace every instance of:

updateQueryString(appState);
updateApp();

with:

updateApp(appState);