Cloud Cloud - 6 months ago 9
CSS Question

Is it possible to maintain content showing by jquery event if user refresh page?

In my web page, I changed content (like gmail) by clicking navigation menu by using jquery. Here is the example,

<p>
I have a classifieds website, and on the page where ads are showed,
I am creating a "Send a tip to a friend" form... So anybody who wants can send a tip of the ad to some friends email-adress.
I am guessing the form must be submitted to a php page right? When submitting the form, the page gets reloaded... I don't want that... Is there any way to make it not reload and still send the mail? Preferrably without ajax or jquery... Thanks
</p>
<button id="chg">
Change content
</button>


Here is what I tried with jquery,

$(document).ready(function(){
var isnew = "";
console.log(isnew);
if(isnew == true) {
console.log("check "+isnew);
$("p").html("New contents are here........");
}

$("#chg").click(function(){
isnew = true;
console.log(isnew);
$("p").html("New contents are here........");
});
});


The main point what I want is, after I click
change content
button, now the text in
p
element is changed to
New contents are here.....
.

At this time, if user reload the page, I want to show just only changed content like
New contents are here.....
. Not the text(paragrah) that are written in
html
.

I already tried as much as I can. But I can't solve the problem. So, I'm very appreciate for any suggestion.

anu anu
Answer
$(document).ready(function(){
    if (sessionStorage.getItem("newContent")) {
     // Restore the contents
     $("p").html(sessionStorage.getItem("newContent"));
    }
    $("#chg").click(function(){
        var newCont = "New contents are here........";
        $("p").html(newCont);
        sessionStorage.setItem("newContent", newCont);
    });
});

Reference

check usage

Comments