CODEWITHSUNDEEP
javascriptjqueryhtml
Umair Shah
Umair Shah

Reputation: 33

how to keep the jquery script changes on page reloading?

I have been trying to search for a way to keep the jquery script changes on page reloading too..

like I have a page where I am using jquery And I do some clicks and on clicks some events get occur..so now I want to keep this page changes the same on page reloading..and then it should get back to reset when I clear my cache..

so any help would be appreciated please..that how it is possible in which frontend language not in some backend language please?

Here is code please which I want to keep the same on the page reloading :

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
#cont {
border: 1px solid #000;
height: 36px;
overflow:hidden;
}
</style>
<a href="#" id="button">View More</a>
<a href="#" id="button2">View Even More</a>
<div id='cont'>
<ul>
    <li>an item</li>
    <li>an item</li>
    <li>an item</li>
    <li>an item</li>
    <li>an item</li>
    <li>an item</li>
</ul>
</div>
<script>
$('#button').click(function(){
$('#cont').animate({height:'72px'}, 500);
//this method increases the height to 72px
});
$('#button2').click(function(){
$('#cont').animate({height: '+=36'}, 500);
//This method keeps increasing the height by 36px
});
</script>

Here is jsfiddle live link : http://jsfiddle.net/jomanlk/JJh9z/1/

Upvotes: 0

Views: 159

Answers (2)

Andreas
Andreas

Reputation: 1150

Since you are using jquery you can use jquery enhanced cookie to support even browsers that do not have this the html 5 local storage capability and If you have big amount of data in that case it stores them in multiple cookies(but this functionality and switching between the two modes is abstracted so you do need to care about compatibility issues). I know that most browsers supported local storage from years ago but as I don't know your exact needs this could solve some issues if local storage does not satisfy you.

Upvotes: 0

folkol
folkol

Reputation: 4883

You could store the value in local storage:

$(function() {
    $('#cont').height(localStorage.getItem('height') || 36);
});

$('#button').click(function(){
    $('#cont').animate({height:'72px'}, 500);
    localStorage.setItem('height', 72);
});

$('#button2').click(function(){
    $('#cont').animate({height: '+=36'}, 500);
    localStorage.setItem('height', $('#cont').height() + 36);
});

JSFiddle: http://jsfiddle.net/JJh9z/1865/

Upvotes: 1

Related Questions