Skip to main content Accessibility Feedback

Persisting state across views in a multi-page app with vanilla JS

On Tuesday, I explained some of my issues with single page apps (or SPAs), and shared an alternative approach: multi-page apps.

Newsletter reader Reed Jones emailed me to ask a great follow-up question (shared with permission):

How would you persist state across multiple pages?

If I need state across multiple UIs, I lean on localStorage or sessionStorage to store the data and access it on page load.

If stored data exists, I update my data state. If not, I use an empty object instead. Something like this:

/**
 * Save state to localStorage
 */
var setState = function () {
	localStorage.setItem('my-awesome-app', JSON.stringify(myData));
};

/**
 * Get saved state from localStorage (if it exists)
 * @return {Object} The data, or an empty object
 */
var getState = function () {
	var saved = localStorage.getItem('my-awesome-app');
	if (saved) {
		return JSON.parse(saved);
	}
	return {};
};

// Get the initial state on page load
var myData = getState();

Whenever something happens to update the state, I fire my setState() method to save it.

Imagine a todo list app. Whenever someone clicks the button to add a list item, we want to update the list and save the data to localStorage.

addTodoBtn.addEventListener('click', function (event) {

	// Run code to update the list and UI, then...

	// Save the state
	setState();

}, false);