14.02.2014, 07:56
|
 |
Профессор
|
|
Регистрация: 14.02.2014
Сообщений: 157
|
|
|
Показать\скрыть с сохранением состояния
Есть скрипт показывающий и скрывающий блок. Как сделать так что бы состояние блока сохранялось при перезагрузке страницы?
Т.е. например: блок был скрыт, я нажал показать он показался затем нажал F5 или перешел на другую страницу, блок сохранил свое состояние.
<a href="#" onclick="showFun()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
var visible = true;
function showFun() {
if(visible) {
document.getElementById('myShowBlock' ).style.display = 'none';
visible = false;
} else {
document.getElementById('myShowBlock' ).style.display = 'block';
visible = true;
}
}
|
|
14.02.2014, 08:13
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
var hide = window.localStorage.getItem('hide');
function showFun() {
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
window.localStorage.setItem('hide', (hide ^= 1));
}
if(hide) showFun();
Не тестировал, но работать должно.  |
|
14.02.2014, 09:32
|
|
Профессор
|
|
Регистрация: 14.02.2014
Сообщений: 157
|
|
Оно скрывает\показывает, но при перезагрузке сбрасывается тоже  |
|
14.02.2014, 10:03
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,137
|
|
psfdek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onclick="showFun()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
var hide = window.localStorage.getItem('hide');
hide = hide === null ? 1 : +hide; //1 если самый самый первый раз нужно чтоб было открыто иначе 0
function showFun() {
window.localStorage.setItem('hide', (hide ^= 1));
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
return false
}
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
</script>
</body>
</html>
|
|
14.02.2014, 10:26
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Во-первых, showFn (show - показать) - неудачное имя для функции, которая скрывает блок.
Во-вторых:
|
Сообщение от Ruslan_xDD
|
|
hide ^= 1
|
Что это такое? Не в обиду, но следующий раз накакаю в кармушку.
Мой вариант:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript:toggleBlock()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
(function() {
var toggle = function(element, show) {
element.style.display = show ? 'block' : 'none';
};
var block = document.getElementById('myShowBlock');
var visible = localStorage.hasOwnProperty('visible') ? JSON.parse(localStorage.getItem('visible')) : true;
toggle(block, visible);
window.toggleBlock = function() {
toggle(block, visible = !visible);
localStorage.setItem('visible', visible);
};
})();
</script>
</body>
</html>
__________________
В личку только с интересными предложениями 
|
|
14.02.2014, 10:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,137
|
|
|
Сообщение от danik.js
|
Во-первых, showFn (show - показать) - неудачное имя для функции, которая скрывает блок.
Во-вторых: Сообщение от Ruslan_xDD
hide ^= 1
Что это такое? Не в обиду, но следующий раз накакаю в кармушку.
|
параноик  |
|
14.02.2014, 10:39
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
danik.js, преобразование в противоположное значение (true в false, false в true), знаю, что смотрится ужасно, но работает. 
|
|
14.02.2014, 10:43
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,137
|
|
|
danik.js,
showFn нормальное название для функции которая работает с анимацией видимости элемента, hide ^= 1 супер решение, применял и буду применять если неподскажите лучше, единственное полезное это 17 строка в вашем коде кеширование элемента - остальное панты правильного пацана - но несмотря на всю правильность вашего кода он оставляет впечатление запутанности и тяжеловесности чтобы в него вникнуть нужно дополнительное усилие: бегать взглядом вверх вниз никакой последовательности.
|
|
14.02.2014, 10:52
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
|
рони, +
hide ^= 1 и ~elemIndexOf('bla bla bla') очень удобно использовать, не понятно почему Данику это не нравится, типо якобы запутывает топик стартера, хотя сам какой-то запутанной фигни для такой простой задачи понаписал.
|
|
14.02.2014, 10:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,137
|
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onclick="return spell()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
var hide = window.localStorage.getItem('hide'),
hide = hide === null ? 1 : +hide, //1 если самый самый первый раз нужно чтоб было открыто иначе 0
block = document.getElementById('myShowBlock');
function show() {
block.style.display = hide ? 'block' : 'none';
}
function spell() {
window.localStorage.setItem('hide', (hide ^= 1));
show();
return false
}
show()
</script>
</body>
</html>
Последний раз редактировалось рони, 14.02.2014 в 11:16.
|
|
|
|
