如何保持jQuery腳本更改頁面重新加載？

Question

我一直在嘗試尋找一種方法來保持頁面重新加載時jquery腳本的更改。

就像我有一個正在使用jquery的頁面，然后單擊並在單擊時發生了一些事件。.所以現在我想讓此頁面在重新加載頁面時保持不變。然后當我重新打開頁面時應重新設置清除我的緩存。

因此，請提供任何幫助。.請問有可能使用哪種前端語言而不使用某些后端語言？

這是我想要在重新加載頁面時保持不變的代碼：

<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>

這是jsfiddle實時鏈接： http : //jsfiddle.net/jomanlk/JJh9z/1/

Answer 1

您可以將值local storage在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/

Answer 2

由於您使用的是jquery，因此您可以使用jquery增強的cookie來支持甚至不具有html 5本地存儲功能的瀏覽器，如果在這種情況下您有大量數據，它將把它們存儲在多個cookie中（但是此功能和兩種模式都是抽象的，因此您確實需要注意兼容性問題）。 我知道幾年前大多數瀏覽器都支持本地存儲，但是由於我不知道您的確切需求，如果本地存儲不能滿足您的需求，這可以解決一些問題。