2014-09-13 2 views
0

Я пытался найти способ сохранить изменения скрипта jquery при перезагрузке страницы тоже.Как сохранить изменения скрипта jquery при перезагрузке страницы?

как у меня есть страница, где я использую jquery. И я делаю несколько кликов, и по щелчкам происходят некоторые события. .so теперь я хочу, чтобы эта страница менялась одинаково при перезагрузке страницы. И тогда она должна вернуться к сбросу, когда я очищаю свой кеш.

поэтому любая помощь будет оценена пожалуйста .. так как это возможно в каком интерфейсе язык не на каком-то бэкэнд-языке, пожалуйста?

Вот код, пожалуйста, который я хочу, чтобы то же самое на перезагрузки страницы:

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

+0

Попробуйте сохранить изменения в файле cookie https://github.com/carhartl/jquery-cookie – Isaac

+0

Вы также можете использовать атрибуты url или локальное хранилище –

+0

, и вы можете отправлять изменения на сервер через ajax и хранить с помощью любого метода, который вы хотите там – charlietfl

ответ

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/

0

Поскольку вы используете jquery, вы можете использовать jquery enhanced cookie для поддержки даже браузеров, у которых нет этой возможности html 5 local storage, и если у вас есть большой объем данных, в этом случае он хранит их в нескольких куках (но эта функциональность и переключение между ними два режима абстрагированы, поэтому вам нужно заботиться о проблемах совместимости). Я знаю, что большинство браузеров поддерживали локальное хранилище много лет назад, но поскольку я не знаю ваших точных потребностей, это может решить некоторые проблемы, если локальное хранилище не удовлетворяет вас.

Смежные вопросы