Javascript 如何在重新加载页面时保持jquery脚本的更改？

我一直在试图寻找一种方法，使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>

#续{
边框：1px实心#000；
高度：36px；
溢出：隐藏；
}

项目
项目
项目
项目
项目
项目

$（“#按钮”）。单击（函数（）{
$（'#cont'）。动画（{height:'72px'}，500）；
//此方法将高度增加到72px
});
$（'#按钮2'）。单击（函数（）{
$（'#cont'）。设置动画（{height:'+=36'}，500）；
//此方法将高度持续增加36px
});

以下是JSFIDLE实时链接：

---

您可以将值存储在：

---

jsiddle:

由于您使用jquery，因此您甚至可以使用它来支持不具备html 5本地存储功能的浏览器，如果您有大量数据，那么它会将它们存储在多个cookie中（但这两种模式之间的功能和切换是抽象的，因此您确实需要注意兼容性问题）。

---

我知道多年前大多数浏览器都支持本地存储，但我不知道您的确切需求，如果本地存储不能满足您的需求，这可能会解决一些问题。

尝试将更改存储在cookie中，您也可以使用url属性或本地存储，您可以通过ajax将更改发送到服务器，并使用您想要的任何方法进行存储

$(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);
});