We Keep Coding

Save controller state on page refresh

I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest

I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.

How to pass javascript variable/object from one page to another?

I want to pass javascript object/ variable from page to another. so that i can use data for some fields, i want this values to be hidden and not visible while i my passing value from one page to another
I have already seen many examples of pass via http parameters, i dont want that and also session variables manage on server side, cause nothing has to be manage on sever side for that page.
i want to pass value as a hidden field or value to next page. how to pass it to new page when i open new page via
window.location="website/nextpage.jsp";
Also a note, i am beginner, so please sorry if the question seems to vague.

You can:
Use hashes in the url by reading the window.location.hash. Similar to GET requests, but does not need the server for passing. However, the parameters are visible in the url.
Using cookies. Have JS "plant" the cookies on the previous page and read them on the receiving page.
You could use DOM storage as well. Similar routine as cookies, plant and read.

Assuming you do not want to use session variables, cookies or local storage:
You can not "hide" a parameter so that your website user will not be able to see it.
If you submit data via a POST request - you can use hidden form elements.
<form method="post">
<input type="hidden" name="state" value="{YOUR PARAMETER}" />
If you use window.location - you will have to do it with a GET request
window.location="website/nextpage.jsp/param/{YOUR PARAMETER}";

I don't know about JSP specifically, but using a form with POST method hides data from (standard) users.

why dont you use html5's localStorage and sessionStorage for the purpose. for more help visit here

jquery fadeout not a solution

With code below I'm fading some divs, but when I reload the page, the divs are visible again. I don't want that to happen; what I need is that if user clicks a back button or the home link, it should go back to the original format, otherwise the divs must be kept hidden when the page is reloaded.
$(document).ready(function () {
$("#prodoneid").click(function () {
$("#sliderid, .prodcls").fadeOut(250);
});
});
below is my html code
<div id="prodoneid" class="prodcls"> <img src="images/zara/thumbnails/1.png" alt="ZARA"/> </div>
<div id="prodtwoid" class="prodcls">
<img src="images/zara/thumbnails/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/puma/thumbnails/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/hermes/thumbnails/1.png" alt="HERMES"/>
</div>
</div>

You will have to save the fact that the divs are hidden either in a cookie or HTML5 local storage (newer browsers only) and process that saved information when the page loads in order to restore the page to the exact state you previously saved. The browser does not do that for you.
Web pages are normally stateless on the client. They are supposed to load from the server the same every time unless you design some client-side state into the page yourself. So, if you want to create some client-side state, you have to either store that state on the server (often with ajax) and put that state back into the page when it's loaded again by that particular viewer. Or, you have to save the state in the local browser (generally using cookies or HTML5 local storage), retrieve it from there when the page is loaded and act on it to put the page in the desired state.
Here's some pseudo code for using cookies for this:
$(document).ready(function () {
/* read the cookie "sliderHidden" and if it's is set to 1,
then: */
$("#sliderid, .prodcls").hide();
$("#prodoneid").click(function () {
$("#sliderid, .prodcls").fadeOut(250);
/* write a cookie called "sliderHidden" set to 1
that remembers that that these items are hidden */
});
});
For jQuery, there is a cookie plug-in that makes it easy to read/write cookies.

You should use fadeOut, but you should also use a technology such as cookies, or HTML5 localStorage if you want to be part of bleeding edge technology so you can persist the setting between page loads.
When you fadeOut the elements, you should write the state you choice of storage, and on page load you should check the storage to see if a previous state exists; and hide() the div if necessary.
You can read more on localStorage here, and cookies here. A jQuery plugin exists which abstracts the low level cookie interface, and you may find it of interest.
Infact, your best option may be to look at this plugin, which attempts to use localStorage, but falls back to cookies if they are not supported in the current browser.

You have to use some kind of cookie to save 'hidden' status of the element. Look for jQuery cookie plugin (http://archive.plugins.jquery.com/project/Cookie).

Hm- HTML is static!
I think you have got to handle this by a session (depends on the programm language) or cookie.
For the Cookie have a look at: this tutorial

You could consider using some kind of session state variable or cookie, that is a weak solution though. Your question is not very clear, better perhaps would be to reconsider the structure of your page and or the view model (assuming MVC here?)

transferring value from one page to other using java script

I have to implement following in java script/HTML
first page(1.html) there will be button. When the user press ok button it should open second page(2.html).
In page 2 (2.html) there will be one text box and button . when the user enter some value in text box and press ok button the value should be availble in the one page 1.html.
How to do it in java script/Html

There are 2 cross browser ways to do this, setting a param in the url or using a cookie. Both can be done with javascript. However, not knowing the length of the data ( and personal preference against insanely long urls ) I would recommend using a cookie.
The easiest way I have found it interact with cookies via javascript is with the jQuery cookie plugin. https://github.com/carhartl/jquery-cookie
//page2
$('#okButton').click(function(e){
e.preventDefault();
var getInput = $('#yourTextInput').val();
$.cookie('mycookie', getInput);
});
//page1
$.cookie('mycookie'); //this will return the value of yourTextInput

Depending on the level of compatibility you require, using the HTML5 Local Storage features might be a good idea.
On your 2.html, set the value using setItem:
localStorage.setItem('aNameForYourData',data_var);
Then, to get it on 1.html, use getItem:
data_var = localStorage.getItem('aNameForYourData');
If you need support in less modern browsers, consider cookies. You can find information about using cookies here.

How do I preserve radio button and check box value without using cookies after the browser refresh?

I have three radio buttons and 4 check boxes.
I want to preserve the radio button and check box values after the browser refresh.
I do not want to use cookies (due to some other reason).
Could anyone please help me?

I don't think this is possible because HTTP is stateless, cookies or server side scripting provide 'state'.

You could use sessions instead.
EDIT: My bad, I read PHP and not Javascript. However I did find this link after a quick Google search. Session variables without cookies in JS

You might be able to use the hash url.
something like this (don't remember if you need to specify the name of the page as well, but I don't think so):
document.location.href = '#radio1=1&radio2=0'
The hash means it just directs things on the current page and not going to another page (and the browser updates it in the address field, so if the user reloads the page, it will still be there). Then you can read it from javascript as well and set it.
Not as good as using server side sessions, but it is an option :)

If you're using a form to trigger a new page loading you can make the onsubmit event call a javascript function to change the window location and append URL parameters that store the values of the radio buttons. When the page loads you would then read the parameter values from the URL. Something like this:
<script type="text/javascript">
function changeURL(){
var str = window.location+"?radio1=1";
window.open(str);
return false;
}
</script>
...
<FORM onsubmit="changeURL();">
<INPUT TYPE="submit" value="click me" >
</FORM>

A new facility is being developed to allow web sites to store persistent data on the client machine. Available in some browsers already this allows you to save the the radio and checkbox states and recover and restore them next time the user visits your site. For more info see here https://developer.mozilla.org/en/DOM/Storage and here http://dev.w3.org/html5/webstorage

Have some JS on the page submit all radiobutton/checkbox events to the server, and store their state in your database. When the page (re)loads, send this state as part of the HTML.