js и localStorage
уважаемые, помогите пожалуйста
есть js код который реализует скрытие/показ сайдбара. как сделать запоминание через локальное хранилище? ума не приложу как это реализовать, не когда не сталкивался <script type="text/javascript">
<!--
var d = document,
sidebar = d.querySelector('.right'),
content = d.querySelector('.content');
d.querySelector('button').addEventListener('click', function(){
sidebar.classList.toggle('hide');
content.classList.toggle('stretch');
}, false);
-->
</script>
|
Цитата:
sidebar content которые меняют состояния по типу "ВКЛ/ВЫКЛ" sidebar.classList.toggle('hide');
// и
content.classList.toggle('stretch');
Тебе остается: - при смене состояния, записать в сторадж "какие они сейчас" - после загрузки документа, прочитать те состояния и перевести те два элемента в эти состояния |
всё равно не понятно. я более менее разобрался как вытащить значения из хранилища, а вот как их сохранить так и не понял
|
Цитата:
http://htmlbook.ru/html5/storage |
Цитата:
если б понял - не спросил:nono: |
Цитата:
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);
Тест localStorage.setItem("bar", 'foo');
// ...
var foo = localStorage.getItem("bar");
alert(foo);
|
Цитата:
|
valetu,если еще актуально,вот навгокодил малость))
<!DOCTYPE html>
<html>
<head>
<style>
.slider {
width: 500px;
background: #00ff93;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button>Hide/Show</button>
<div class="slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In debitis nihil deleniti id beatae tenetur laudantium eligendi cumque earum, rerum sapiente nostrum illum vitae delectus eaque totam vel perspiciatis, praesentium minus nisi sint consequuntur suscipit nulla quia deserunt. Laudantium officia magnam voluptatem, id sapiente ducimus possimus temporibus dignissimos perferendis, optio ex, aut enim hic cupiditate doloremque sint illo repellendus, commodi voluptatum distinctio blanditiis impedit. Deleniti quo pariatur consectetur eos error facere soluta doloribus minus reiciendis maiores praesentium, libero expedita voluptate aut est id earum debitis odio modi cumque ducimus, aliquam repudiandae! Facere obcaecati natus quasi omnis dolorem quidem aperiam eos, fugiat sint ex inventore ut saepe eveniet eaque non tenetur necessitatibus corporis, veritatis magnam a culpa voluptate aut, dignissimos ratione repellat. Vero exercitationem nulla, aperiam sit esse ea repellendus nihil inventore minima asperiores tempore blanditiis error architecto est laboriosam a sint modi, laborum deleniti provident dolorem perferendis in. Officiis voluptas nulla recusandae deserunt voluptate incidunt cumque tempora molestias repudiandae esse. Enim alias ab omnis quibusdam magnam cupiditate, eius consequuntur illum vitae, modi quod neque amet veritatis commodi aspernatur accusamus tenetur quisquam reprehenderit doloremque. Eligendi tenetur quae laudantium. Minus corporis nemo dolore nulla magni error maiores quis cum dolorem veritatis dolorum optio pariatur expedita est dolor, reprehenderit asperiores exercitationem aut magnam dolores ipsum! Ab eius quos, fugiat explicabo voluptatem unde fuga doloribus recusandae labore veniam aperiam ea quidem tenetur suscipit ut dicta voluptates corrupti praesentium neque deserunt officiis porro alias. Aliquam, ut, voluptatem! Est tempora assumenda illum adipisci labore voluptatibus eligendi repellendus, facere, molestiae sapiente maxime dolore harum error, ab molestias voluptate id atque. Consectetur voluptatem autem nulla consequuntur quam, minus doloribus est repudiandae obcaecati maiores ex assumenda adipisci tempora aut asperiores, sequi officiis vel odio odit quibusdam repellat alias illum velit nam. Voluptas ex, culpa blanditiis ipsa excepturi dolorum itaque.</p>
</div>
<script>
var slider = document.querySelector(".slider"),btn = document.getElementsByTagName("button")[0];
if (localStorage.getItem("hide") === "true") {
slider.classList.remove("hide");
} else if(localStorage.getItem("hide") != "true" && localStorage.getItem("hide") != null) {
slider.classList.add("hide");
}
btn.onclick = function(){
if (localStorage.getItem("hide") == null) {
localStorage.setItem("hide","true");
slider.classList.remove("hide");
}
if (localStorage.getItem("hide") === "true" && slider.classList.contains('hide')) {
slider.classList.remove("hide");
localStorage.setItem("hide","false");
}else if(localStorage.getItem("hide") === "true" && slider.classList.contains('hide') != "true"){
slider.classList.add("hide");
localStorage.setItem("hide","false");
}else if(localStorage.getItem("hide") === "false") {
slider.classList.remove("hide");
localStorage.setItem("hide","true");
}
};
</script>
</body>
</html>
|
Endy,
спасибо большое, но мне кажется это немного не то. у Вас просто скрывается блок и сделать это можно короче по коду (хотя я может и не прав, что мой способ будет таким же) у меня загвоздка именно в моём скрипте, что при нажатии кнопки заменяются свойства для блоков <script type="text/javascript">
<!--
var d = document,
sidebar = d.querySelector('.right'),
content = d.querySelector('.content');
d.querySelector('button').addEventListener('click', function(){
sidebar.classList.toggle('hide');
content.classList.toggle('stretch');
}, false);
-->
</script>
.content {
left: 150px;
right: 150px;
background: #bfc9e8;
transition: right 1s linear;
}
.right {
right: 0;
width: 150px;
overflow: hidden;
background: #99d9ea;
transition: width 1s linear;
}
меняются .stretch {
right: 0;
}
.hide {
width: 0;
}
не могу разобраться как два свойства заставить сохраняться в хранилище P.S. вроде что чо сделал |
valetu,
так а что именно не понятно? //устанавливаем значение
localStorage.setItem("sidebar", 'la-la-la');
// получаем значение
var sidebar = localStorage.getItem("sidebar");
console.log(sidebar);
|
| Часовой пояс GMT +3, время: 10:25. |