1

Let's say I gave this code:

<input type="hidden" id="field" name="field" value="1">      
<button id="change">Change</button>

And this javascript:

alert($("#field").val());
$("#change").on("click", function(){
    var newValue = parseInt($("#field").val()) + 1;
   $("#field").val(newValue);
   alert($("#field").val());
});

If I change the value, go to a different page and then use the back button, in chrome and firefox the latest value is shown while in IE the default value. How to fix that without using sessionstorage?

Fiddle

Java_User
  • 1,303
  • 3
  • 27
  • 38
dot404
  • 198
  • 1
  • 12

3 Answers3

2

This is not a standard practice, may be Firefox and Chrome are caching the values. But you should not rely on it.

If you refresh the page using Ctrl + F5, it will not work.

Cheezy Code
  • 1,685
  • 1
  • 14
  • 18
0

you can not persist the value in the page itself..., any full page reload will clear any values which you have changed... so unless you save the state to some sort of persist layer... depending on the bowser the back button will behave in different ways... some much older browsers with no caching will reload the whole page.

Some may cache the actual javascript before the modifications and therefore load the old javascript and with the old value form the cache as well.

It is better to handle this in some sort of persist layer

see: Ajax, back button and DOM updates

Community
  • 1
  • 1
Seabizkit
  • 2,417
  • 2
  • 15
  • 32
  • 1
    I'm not reloading the page, I'm moving to a new page and coming back with the back button. In chrome and ff the value is persisted, while in IE isn't – dot404 Oct 14 '15 at 13:07
  • 1
    He's not asking about a full page reload. – Rick Burns Oct 14 '15 at 13:07
  • 2
    @UncleRico do you know what the back button does? I mean technically between different browsers.... This is not a good way to believe that values will be persisted... its not standard and unpredictable. It also depend on the feature set i.e. ie8 vs ie 10 back buttons will behave very differently technically. – Seabizkit Oct 14 '15 at 13:18
  • @Seabizkit the back button in most browsers do not do a SHIFT+F5 refresh. They load the existing page from the cache. IE is a unicorn in that different version numbers do different things. – Rick Burns Oct 14 '15 at 13:22
  • @Seabizkit from the HTTP 1.1 spec: The Web server is only contacted if the page file is not in the cache. Expiration headers from the server will have no affect over this behavior, as described in the HTTP 1.1 specification. For static files, this is almost always the desired behavior. If the file content is not changing on the server, then it improves Internet Explorer's performance greatly to never contact the server for those files when the back and forward buttons are used. – Rick Burns Oct 14 '15 at 13:24
  • @UncleRico I never! said anything like, its shift+f5 fyi. from cache? which cache.... the browser cache... who says... that JavaScript is persisted in that cache. I suggest that you do a little reading on what the back button does... its nothing like shift+f5 and will differ between browser, regardless of this it is not standard to be used for persisting in this way. – Seabizkit Oct 14 '15 at 13:26
  • @Seabizkit A "full page reload" is the same as SHIFT+F5. While Javascript is persisted from the cache, the actions that are performed are not. It is well document, see here for an example: http://stackoverflow.com/questions/21274085/internet-explorer-11-back-button-javascript-behavior – Rick Burns Oct 14 '15 at 13:28
  • @UncleRico see http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates. I think you are only factoring in new current browsers... also the fact remains this is bad practice to retain java-script values as its depends on browser caching and not HTTP 1.1 specification – Seabizkit Oct 14 '15 at 13:32
  • 1
    @Seabizkit I agree that it is a bad practice to try to rely on something like this to retain values. But making IE behave more like Chrome and Firefox has, unfortunately, been the role of the web developer for the last decade or so. – Rick Burns Oct 14 '15 at 13:47
0

Please try to set value with:

$("#field").attr("value", newValue);

Don't use .val() method. I have a similar issue and I solved with it because IE not refresh a hidden value with .val().