показать DIV даже после перезагрузки страницы

По щелчку кнопки, я показываю в DIV с помощьюпоказать DIV даже после перезагрузки страницы

document.getElementById('message-box').style.display="block";

но когда страница перезагружается этот DIV снова исчезает. Я хочу, чтобы div оставался до тех пор, пока я явно не закрою его кнопкой x. Как я могу это сделать?

источник

2015-08-29 Adam nick

Set и проверить печенье. https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie – sinisake

в любом примере? неважно, я просто новичок в js –

Как @nevermind сказал, что вам нужно иметь переменную в cookie или localStorage. Установите для файла cookie или переменной значение true, когда нажата кнопка для отображения div. И установите значение false после нажатия x. Объедините это с ответом Вассилия внизу, чтобы показать div после перезагрузки, если значение cookie или переменной истинно. Вы можете найти множество руководств и примеров по обработке файлов cookie и localStorage. –

Этот простой пример будет делать то, что вы хотите достичь

HTML:

<div class='hidden' id='hiddenDiv'>NOT SHOWN UNTIL YOU CLICK IT!! <span> 
     <input type='button' value='X' onclick='closeClick()'> 
    </span> 

</div> 
<input type='button' value='show me the div' onclick='openClick()' />

JS:

function openClick() { 
    document.getElementById('hiddenDiv').style.display = "block"; 
    sessionStorage.setItem('clicked', true); 
} 

function closeClick() { 
    document.getElementById('hiddenDiv').style.display = "none"; 
    sessionStorage.removeItem('clicked'); 
} 

window.onload = function() { 
    var data = sessionStorage.getItem('clicked'); 
    if (data == 'true') { 
     openClick(); 
    } 
};

fiddle example

источник

2015-08-29 21:15:46

ваш пример работает на скрипке, но не на моем приложении laravel. странно:/ –

это мой html ' {{$ user-> имя}}'
JS
'функция openMessageBox (эль) { document.getElementById ('Сообщение- коробка '). стиль.дисплей = «блок»; sessionStorage.setItem ('clicked', true); } ' Моя функция тоже получает аргумент, возможно, это проблема? –

значения сеанса устанавливаются и не устанавливаются, но div не отображается после перезагрузки страницы. –

попробовать это одно:

window.onload = function() {document.getElementById('message-box').style.display="block";};

источник

2015-08-29 20:19:40

это произойдет даже до щелчка, я думаю, он хочет, чтобы это произошло только после нажатия –

. Div должен отображаться только после нажатия кнопки. Но должен оставаться открытым даже после перезагрузки, если не закрыт. –

О, извините. Лучший способ - cookie, как никогда не писал в комментарии. –

Я не собираюсь писать код здесь, так как это делает разработчик ленивы копирования/вставки, но я хочу рассказать вам, как вы можете решить.

Проблема в том, что вы обновляете страницу, и состояние этого div удаляется, так как не является постоянным состоянием.

Решение для этого - это либо файлы cookie, либо localStorage, где вы можете установить переменную, если кнопка выключена или нет.

Надеюсь, это поможет.

источник

2015-08-29 20:23:56 sadiqevani

ok У меня получилось, что я должен хранить cookie (переменную bool) для этого. Но когда страница перезагружается, и я получаю значение cookie, теперь, как бы я снова показал тот же div? –

Эй, Я полагаю, вам нужно проверить загрузку страницы либо с помощью JavaScript document.onload = function() {}, либо с помощью jQuery .ready(). Когда вы убедитесь, что условие верное, вы применяете этот стиль. – sadiqevani

Лучше использовать localStorage, я бы подумал дважды, прежде чем потянуть руки за файлы cookie. –

показать DIV даже после перезагрузки страницы

ответ

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