Javascript changes to the dom lost when back button pressed

I have this view that changes the text inside a div.

The user can then click on a link to jump to another page. But when the user presses the "back" button all DOM changes are lost.

FF remembers the changed div text but Chrome and IE do not.

I've found similar question, but in my case it is not possible to summarize the state by a url hash because the div contains random data.

I need is so that when the user goes back, the div is filled from the identical series of numbers.

<script type="text/javascript">

    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

You may check this question/answer here stackoverflow.com/questions/1195440/…

– BenSchro10
May 22 '12 at 12:49

This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state.

– Riccardo Bassilichi
May 22 '12 at 13:05

1

you could try to set a cookie, and modify it every time you call the function.

– d4rkpr1nc3
May 22 '12 at 13:07

The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button?

– Riccardo Bassilichi
May 22 '12 at 13:20

1

You don't store the html. You store a datastructure which you use to rebuild the page.

– John Kalberer
May 22 '12 at 16:12

|
show 1 more comment

I have this view that changes the text inside a div.

The user can then click on a link to jump to another page. But when the user presses the "back" button all DOM changes are lost.

FF remembers the changed div text but Chrome and IE do not.

I've found similar question, but in my case it is not possible to summarize the state by a url hash because the div contains random data.

I need is so that when the user goes back, the div is filled from the identical series of numbers.

<script type="text/javascript">

    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

You may check this question/answer here stackoverflow.com/questions/1195440/…

– BenSchro10
May 22 '12 at 12:49

This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state.

– Riccardo Bassilichi
May 22 '12 at 13:05

1

you could try to set a cookie, and modify it every time you call the function.

– d4rkpr1nc3
May 22 '12 at 13:07

The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button?

– Riccardo Bassilichi
May 22 '12 at 13:20

1

You don't store the html. You store a datastructure which you use to rebuild the page.

– John Kalberer
May 22 '12 at 16:12

|
show 1 more comment

I have this view that changes the text inside a div.

The user can then click on a link to jump to another page. But when the user presses the "back" button all DOM changes are lost.

FF remembers the changed div text but Chrome and IE do not.

I've found similar question, but in my case it is not possible to summarize the state by a url hash because the div contains random data.

I need is so that when the user goes back, the div is filled from the identical series of numbers.

<script type="text/javascript">

    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

I have this view that changes the text inside a div.

The user can then click on a link to jump to another page. But when the user presses the "back" button all DOM changes are lost.

FF remembers the changed div text but Chrome and IE do not.

I've found similar question, but in my case it is not possible to summarize the state by a url hash because the div contains random data.

I need is so that when the user goes back, the div is filled from the identical series of numbers.

<script type="text/javascript">

    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

javascript dom back-button

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

edited May 22 '12 at 15:45

Nealbo

356319

edited May 22 '12 at 15:45

Nealbo

356319

edited May 22 '12 at 15:45

Nealbo

356319

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

asked May 22 '12 at 12:42

Riccardo Bassilichi

565916

You may check this question/answer here stackoverflow.com/questions/1195440/…

– BenSchro10
May 22 '12 at 12:49

This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state.

– Riccardo Bassilichi
May 22 '12 at 13:05

1

you could try to set a cookie, and modify it every time you call the function.

– d4rkpr1nc3
May 22 '12 at 13:07

The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button?

– Riccardo Bassilichi
May 22 '12 at 13:20

1

You don't store the html. You store a datastructure which you use to rebuild the page.

– John Kalberer
May 22 '12 at 16:12

|
show 1 more comment

You may check this question/answer here stackoverflow.com/questions/1195440/…

– BenSchro10
May 22 '12 at 12:49

This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state.

– Riccardo Bassilichi
May 22 '12 at 13:05

1

you could try to set a cookie, and modify it every time you call the function.

– d4rkpr1nc3
May 22 '12 at 13:07

The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button?

– Riccardo Bassilichi
May 22 '12 at 13:20

1

You don't store the html. You store a datastructure which you use to rebuild the page.

– John Kalberer
May 22 '12 at 16:12

You may check this question/answer here stackoverflow.com/questions/1195440/…

– BenSchro10
May 22 '12 at 12:49

This not solve my problem. I know that Safari e FF store the modified dom ready for the back button but IE and charome return to initial state.

– Riccardo Bassilichi
May 22 '12 at 13:05

you could try to set a cookie, and modify it every time you call the function.

– d4rkpr1nc3
May 22 '12 at 13:07

The cookie is a good idea! But my question is: Storing html in cookies is a best practice to persist DOM changed from back button?

– Riccardo Bassilichi
May 22 '12 at 13:20

You don't store the html. You store a datastructure which you use to rebuild the page.

– John Kalberer
May 22 '12 at 16:12

|
show 1 more comment

1 Answer
1

active

oldest

votes

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">

    function onLoadPage(){

        if(window.localStorage.getItem("newText") != null){

            $("#container").html(window.localStorage.getItem("newText"));

        }

    }



    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        window.localStorage.setItem("newText") = newText;



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

answered Nov 24 '18 at 16:14

Lucas Anschau

715

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10702254%2fjavascript-changes-to-the-dom-lost-when-back-button-pressed%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">

    function onLoadPage(){

        if(window.localStorage.getItem("newText") != null){

            $("#container").html(window.localStorage.getItem("newText"));

        }

    }



    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        window.localStorage.setItem("newText") = newText;



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

answered Nov 24 '18 at 16:14

Lucas Anschau

715

add a comment |

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">

    function onLoadPage(){

        if(window.localStorage.getItem("newText") != null){

            $("#container").html(window.localStorage.getItem("newText"));

        }

    }



    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        window.localStorage.setItem("newText") = newText;



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

answered Nov 24 '18 at 16:14

Lucas Anschau

715

add a comment |

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">

    function onLoadPage(){

        if(window.localStorage.getItem("newText") != null){

            $("#container").html(window.localStorage.getItem("newText"));

        }

    }



    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        window.localStorage.setItem("newText") = newText;



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

answered Nov 24 '18 at 16:14

Lucas Anschau

715

You can store your html in LocalStorage, so when user go back, you fill the content with your localStorage:

<script type="text/javascript">

    function onLoadPage(){

        if(window.localStorage.getItem("newText") != null){

            $("#container").html(window.localStorage.getItem("newText"));

        }

    }



    function ChangeText() {

        var newText = "";



        for (var i = 0; i < 10; i++) {

            newText = newText + Math.random() * 100;

            newText = newText + "<br />";

        }



        window.localStorage.setItem("newText") = newText;



        $("#container").html(newText);

    }

</script>



<div id="container">

    INITIAL TEXT

</div>

<button onclick="ChangeText()">Click here to generate random numbers</button>

<br/>

<a href="http://www.google.com">External link</a>

answered Nov 24 '18 at 16:14

Lucas Anschau

715

answered Nov 24 '18 at 16:14

Lucas Anschau

715

answered Nov 24 '18 at 16:14

Lucas Anschau

715

answered Nov 24 '18 at 16:14

Lucas Anschau

715

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg