function xml2html(response_text) {
// get the suggestion elements from the response
let parser = new DOMParser();
let xml = parser.parseFromString(response_text,"text/xml");
let s = xml.getElementsByTagName('suggestion');
// construct a bullet list from the suggestions
let htmlCode = "<ul>";
for (let i = 0; i < s.length; i++) {
let text = s[i].getAttribute("data");
htmlCode += "<li><b>" + text + "</b></li>";
}
htmlCode += "</ul>";
return htmlCode;
}
Q: Open an email. When a user presses back button, what will the user expect?
Q: Knowing what we know, what is likely to happen?
Browser’s back button may cause a serious usability issue
User expects the previous app state within the SPA
Browser may unload the app and go to the previous page
Deep Link
Q: When a user “saves” a URL, what does the user expect to see when the user visits the URL later?
Q: Within a SPA, how can we go back to a particular state of the app if all states are the “same” page?
Q: Any way to address the back-button and deep-link issue?
Pre-HTML5: URL Fragment Identifier
URL: http://hostname/path#fragment_identifier
Change in URL fragment identifier does not reload a page
Navigation within the same page
Associate each “state” of the app with a unique URL fragment identifier
Back button will change the URL by changing the fragment identifier, but browser says in the same page
Intercept “fragment identifier change event” to handle “state change event”
location.hash and onhashchange
window.location.hash: JavaScript API to URL fragment identifier
When the app state changes, Update window.location.hash to change fragment identifier
The updated URL is appended to the browser history
Set window.onhashchange to a custom handler to take an action on fragment identifer change
HTML5: Session History API
history.pushState(object, title, url) and history.replaceState(object, title, url)
Allows saving an “object” as part of browser
Appends (pushState) or replaces (replaceState) browser history
When users navigate history through the back button, “pop state” event is triggered
Set window.onpopstate to a custom handler function to update the app using the “popped object” as a result of history navigation
Web Storage API (1)
Q: Can our app store data persistently in the client (not in the server)?
Allows SPA work using saved data even with no network
Q: What about cookie?
Web Storage API (2)
localStorage: Persistent client-side data storage API
Essentially an “associative array” (or key-value store)
// store data
localStorage["username"] = "John";
localStorage["object"] = JSON.stringify(obj);
// get data
let name = localStorage["username"];
// iterate over all stored keys
for(let key in localStorage) {
let value = localStorage[key];
}
// remove data
localStorage.removeItem("username");
localStorage.clear(); // delete everything
Web Storage API (3)
localStorage and sessionStorage
localStorage persists over multiple browser sessions
Separate storage is allocated per each server
sessionStorage persists only within the current browser tab
Data disappears once the browser tab is closed
If two tabs from the same server is opened, they get separate storage
Standard allows storing any object, but most browsers support only string
IndexedDB
More advanced local storage API with supports for
JSON object storage
Transactions
Non-blocking asynchronous API
More powerful than localStorage but more complex to use
