cyle/store-state-in-url-hash.html

## store-state-in-url-hash.html
<!doctype html>
<html>
<head>
<title>storing state in the url hash, a demo</title>
<style>
body, input { font-family: sans-serif; font-size: 16px; }
div { margin: 3em; }
</style>
</head>
<body>
<div>

<h1>store data state in the url hash with js</h1>

<!-- some fields to use as an example -->
<p>change these fields:</p>
<!-- whatever defaults are here is what the user sees if there is no state given -->
<p><b>some text:</b> <input type="text" value="lol" id="txt"></p>
<p><b>a number:</b> <input type="number" value="0" id="num"></p>
<p>and notice how the url changes...</p>
<p>now copy the url and paste it into another window,</p>
<p>and notice how the field values are preserved.</p>
<p>or show this url in a text field for the user to copy:</p>
<p><b>current state:</b> <input type="text" id="url" style="width:600px;" readonly>

</div>
<script>
/**
 * really dumb store-state-in-the-url javascript thing
 * no database needed, easily share-able
 *
 * also remember that whatever is here can be seen by people on the site
 * so don't do any dumb insecure shit like eval()
 */

// point to the DOM elements that the user can change
var text_input = document.getElementById('txt');
var number_input = document.getElementById('num');

// this'll hold another copy of the address bar because people are dumb
var url_input = document.getElementById('url');

// listen for when the user changes things
text_input.addEventListener('change', save_new_state);
number_input.addEventListener('change', save_new_state);

// helper function to turn an object into a string
// note: this is dumb and easy and not a good idea, just an example
function serialize(data) {
    return JSON.stringify(data); // use something better
}

// helper function to turn a string back into an object
// note: this is dumb and easy and not a good idea, just an example
function deserialize(string) {
    try {
        return JSON.parse(string); // use something better
    } catch (err) {
        // lol the URL was shit probably
        console.error('derp!', err);
        return undefined;
    }
}

// every time the user does something, save the new state to the URL
function save_new_state() {
    // a temp data object to serialize
    var data = {
        txt: text_input.value,
        num: number_input.value,
    };
    // serialize the data and save behind the url's #
    window.location.hash = serialize(data);
    // show the current url in a readonly text field
    url_input.value = window.location.toString();
}

// every time the page loads, see if some state came with it
function load_state() {
    // will hold data if there is any
    var data;
    // get the current url hash (behind the #)
    var url_hash = window.location.hash.substr(1);
    console.log('hash on page load is', url_hash); // debug in dev
    // check for and apply state if any is present
    if (url_hash !== undefined && url_hash !== '') {
        console.log('whoa'); // we found shit
        // try turning the hash string into data
        data = deserialize(url_hash);
        if (data === undefined) {
            return; // nope, nothing here
        }
        // do we see what we'd expect?
        if (data.txt !== undefined) {
            text_input.value = data.txt;
        }
        if (data.num !== undefined) {
            number_input.value = data.num;
        }
    }
    // update the url text field for dummies
    url_input.value = window.location.toString();
}

// on window load, try to load state
window.onload = load_state;
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>storing state in the url hash, a demo</title>
	<style>
	body, input { font-family: sans-serif; font-size: 16px; }
	div { margin: 3em; }
	</style>
	</head>
	<body>
	<div>

	<h1>store data state in the url hash with js</h1>

	<!-- some fields to use as an example -->
	<p>change these fields:</p>
	<!-- whatever defaults are here is what the user sees if there is no state given -->
	<p><b>some text:</b> <input type="text" value="lol" id="txt"></p>
	<p><b>a number:</b> <input type="number" value="0" id="num"></p>
	<p>and notice how the url changes...</p>
	<p>now copy the url and paste it into another window,</p>
	<p>and notice how the field values are preserved.</p>
	<p>or show this url in a text field for the user to copy:</p>
	<p><b>current state:</b> <input type="text" id="url" style="width:600px;" readonly>

	</div>
	<script>
	/**
	* really dumb store-state-in-the-url javascript thing
	* no database needed, easily share-able
	*
	* also remember that whatever is here can be seen by people on the site
	* so don't do any dumb insecure shit like eval()
	*/

	// point to the DOM elements that the user can change
	var text_input = document.getElementById('txt');
	var number_input = document.getElementById('num');

	// this'll hold another copy of the address bar because people are dumb
	var url_input = document.getElementById('url');

	// listen for when the user changes things
	text_input.addEventListener('change', save_new_state);
	number_input.addEventListener('change', save_new_state);

	// helper function to turn an object into a string
	// note: this is dumb and easy and not a good idea, just an example
	function serialize(data) {
	return JSON.stringify(data); // use something better
	}

	// helper function to turn a string back into an object
	// note: this is dumb and easy and not a good idea, just an example
	function deserialize(string) {
	try {
	return JSON.parse(string); // use something better
	} catch (err) {
	// lol the URL was shit probably
	console.error('derp!', err);
	return undefined;
	}
	}

	// every time the user does something, save the new state to the URL
	function save_new_state() {
	// a temp data object to serialize
	var data = {
	txt: text_input.value,
	num: number_input.value,
	};
	// serialize the data and save behind the url's #
	window.location.hash = serialize(data);
	// show the current url in a readonly text field
	url_input.value = window.location.toString();
	}

	// every time the page loads, see if some state came with it
	function load_state() {
	// will hold data if there is any
	var data;
	// get the current url hash (behind the #)
	var url_hash = window.location.hash.substr(1);
	console.log('hash on page load is', url_hash); // debug in dev
	// check for and apply state if any is present
	if (url_hash !== undefined && url_hash !== '') {
	console.log('whoa'); // we found shit
	// try turning the hash string into data
	data = deserialize(url_hash);
	if (data === undefined) {
	return; // nope, nothing here
	}
	// do we see what we'd expect?
	if (data.txt !== undefined) {
	text_input.value = data.txt;
	}
	if (data.num !== undefined) {
	number_input.value = data.num;
	}
	}
	// update the url text field for dummies
	url_input.value = window.location.toString();
	}

	// on window load, try to load state
	window.onload = load_state;
	</script>
	</body>
	</html>