Develop Reference

Sending and receiving data between two pages

I'm working on a basic voting system where I have 2 HTML pages (both on the same domain).
On page 1 there are two buttons of which the person should choose one.
One page 2 I want to visualise the chosen option in a graph.
The goal is that if a button is clicked on page 1, the data on page 2 updates automatically without refreshing the whole page.
In order to do this, I tried saving the clicked option in a localStorage. I managed to get the data by writing a variable using localStorage.getItem(''). However, when I get the data, I have to manually refresh page 2 for the result to show. Is there a way to update the data on page 2? So if I press multiple buttons, multiple responses will show on page 2?
I also saw that there is a possibility of using WebSockets. Since I'm only familiar with HTML and JavaScript, I was wondering whether it's possible to solve my issue without setting up a server and run things locally. If that's not possible, what would be the best (and maybe easiest) way to solve my issue?

If you have page 2 successfully reading a variable that you get from local storage (which is being updated by actions taken on page 1), you can make a timer with setInterval to read from local storage every x milliseconds. Then the graph will update on its own.
See documentation for setInterval here.

Maybe the best and simple solution is setting specific url parameters for each button selection.
Then on the page 2 you simply show conditionally according the url parameter.

Apex - Clear form when leaving page (also on redirect)

Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?

You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.

You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});

What is the best way to store and retrieve datas after clicking the previous Button Browser

I want to know what is the best way to store and retrieve datas only after clicking the back button Browser ?
In my case, you have a list of items (different for each categories I have on my website) that appends in angularJS with the ng-repeat directive, and you can filter these items by clicking on the checkbox inputs. Obviously, each checkbox has a specific value corresponding to a filter.
When the user click on an item, it redirects you to an article (such as a blog post).
May be the user doesn't like this blog post so he clicks on the back button of his browser to go back to the item list.
But for now, I don't store checkbox tags that have been checked before and the items filtered.
I try with localStorage and sessionStorage in JS but datas are too persistants with this method.
I could make a trick like retrieving the datas if the REFERER matches with a specific url pattern, but it seems to be too tricky..
So any of you has a better idea ?
Thanks in advance.

You can use the state object for this purpose. This one is accessible via history.state and will change when a user navigates to somewhere. It will also be restored when using back button etc. It is can be seen as a storage object that is linked directly to the url.

How can I store a list of usernames on client side?

I have a load of chat boxes which come up on click of a username within a list. The problem is I need to know which are currently chosen to hide/show if more are clicked than there is screen space (think of facebook - you keep clicking friends for private message and when no more fit along the bottom, the next one takes the last boxes spot. Clearly you hide this last one, but want it to come back if you close this current choice)
So, I need to cache a list or have a ridiculous number of input boxes in preparation. I have been looking at possibilities and is it possible to implement this with JSON cache? Is there a better option?
If JSON is the best option, please can somebody show me simply:
-> store array of usernames in jquery to JSON cache
-> retrieve JSON cache into jquery array
My JSON knowledge = 0.0001% and this is the only thing I want to use it for for a long time so my jsfiddle attempts failed. If you know any good "beginner / fast skim over" tutorials please link them!
Many thanks as always

Maybe you should look into the HTML5 feature localStorage
localStorage
localStorage How to use it
With that you can save the current username list of your users in their browser and access it easily with javascript.
You can save the data just for the browser session sessionStorage or for longer localStorage, so if the user comes back the next day, his settings will still be set.

JavaScript iterating through dynamic checkboxes on an aspx page

I have an aspx page that has dynamically created checkboxes. I'm trying to find a way to keep the state of this page (checkboxes that are checked to remain checked) when I hit the navigation button to go to the previous page. The problem is when I go from the previous page back to the page with the checkboxes I lose all of the values. I understand why I lose them but I can't figure out how to retain them. I was thinking about saving the ids of the boxes that are checked in a table but there just have to be a better way. Any help would be appreciated.

If you want to keep the data for a long time, then storing in a table is absolutely the right approach.
If you only need to store them temporarily, then storing the data in a session variable would be a good option.
You could also store the values directly in a cookie, which would give you the option to use either server side code or javascript to set the checkboxes.