I'm trying to make a simple example in order to better understand the capabilities of the location hash.
Essentially, I created a page with a button. Every time you press the button a new button is added and a new hash is added to the base url. The hash varies according to the number of buttons present in the page so if there are two buttons the hash will be "/#buttons2" and if there are three buttons the hash will be "/#buttons3".
I was under the impression that if I am in the url "/#buttons3" and then return to the url with "/#buttons2" the page will update and it will show me only two buttons instead of the current three but this does not happen. Also, reloading the page will preserve the hash but it will not preserve the changes that I have made, in this case the buttons that I have added disappear.
This is my code:
//HTML
<button>I am a button</button>
// JavaScript
<script>
var buttons = 1;
$("button").click(function () {
location.hash = 'buttons' + ++buttons;
$("body").append("<button>Click me</button>");
});
});
</script>
I was trying to mimic the behavior that you get with, for example, by using Angular, but without using a JavaScript framework. Is this possible? Can it be done with JQuery?