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：

中

$(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 enhanced cookie来支持那些没有html 5本地存储功能的浏览器。如果您拥有大量数据，则会将它们存储在多个Cookie中（但是这个功能和两种模式之间的切换是抽象的，所以你需要关心兼容性问题）。我知道多年前大多数浏览器都支持本地存储，但由于我不知道您的确切需求，如果本地存储不能满足您的需求，这可以解决一些问题。

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

2 个答案: