Тема: js и localStorage
Показать сообщение отдельно
  #8 (permalink)  
Старый 15.05.2015, 17:18
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

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>
Ответить с цитированием