Как сохранить действие в cookie?
Я сделал простую функцию, которая показывает некоторый контент, если вы нажмете определенную кнопку. Моя проблема в том, что я не знаю, как сохранить это действие, даже если вы перезагрузите страницу.
Вот мой HTML:
<div class = "content1" style = "display: none;">
<p style = "color: green;">Some content from content1</p>
</div>
<div class = "content2" style = "display: none;">
<p style = "color: red;">Some content from content2</p>
</div>
<button class = "content1-btn">Button 1</button>
<button class = "content2-btn">Button 2</button>
Вот мой jQuery:
$(document).ready(function(){
$(".content1-btn").click(function(){
$(".content1").show();
});
$(".content2-btn").click(function(){
$(".content2").show();
});
});
Приведенный выше код работает достаточно хорошо, как и должно быть. Проблема в том, что я хочу, чтобы файл cookie запоминал кнопку ведьмы, на которую вы нажали. Если, например, вы нажмете кнопку 1, то .content1 все равно должен отображаться, даже если вы перезагрузите страницу. Я надеюсь, что это имеет смысл.
ты пробовал localStorage
По этому поводу много вопросов, например: stackoverflow.com/questions/1458724/…. Вы вообще проводили какие-то исследования? Если это так, отредактируйте вопрос, чтобы показать код, который вы пробовали.
Вероятно, вам следует хранить не то, какая кнопка нажата, а то, в каком состоянии должно находиться приложение. Затем вы можете сохранить это состояние, например. локальное хранилище. В следующий раз, когда вы откроете приложение, вы прочитаете состояние и перестроите веб-приложение оттуда (покажите необходимое содержимое). Вы также можете неправильно использовать cookie для этого.
Ответы 1
попробуйте использовать локальное хранилище, это сработает, или попробуйте это,
$(".content1-btn").click(function(){
$(".content2").hide();
$(".content1").show();
localStorage.setItem('buttonClicked', '.content1');
});
$(".content2-btn").click(function(){
$(".content1").hide();
$(".content2").show();
localStorage.setItem('buttonClicked', '.content2');
});
$(document).ready(function(){
$(".content2, .content1").hide();
var val = localStorage.getItem('buttonClicked');
$(val).show();
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "content1" style = "display: none;">
<p style = "color: green;">Some content from content1</p>
</div>
<div class = "content2" style = "display: none;">
<p style = "color: red;">Some content from content2</p>
</div>
<button class = "content1-btn">Button 1</button>
<button class = "content2-btn">Button 2</button>
Попробуйте
localstorageдля хранения данных...