Как хранить коллапс в sessionStorage? - PullRequest
Новая
       1

Как хранить коллапс в sessionStorage?

0 голосов
/ 09 февраля 2020

У меня мало коллапса, и я хочу сохранить в localStorage в соответствии с пользовательской активностью. Прямо сейчас это не работает должным образом. Как я могу это сделать?

Это мой код: - 

$('p').addClass(sessionStorage.getItem('className'));

$('h5').click(function(){
  $(this).next('p').toggleClass('active');
   window.sessionStorage.setItem('className', 'active'); 
});
p{display:none;}
p.active{display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h5>collapse 1</h5>
<p>This is collapse data</p>

<h5>collapse 2</h5>
<p>This is collapse data</p>

<h5>collapse 3</h5>
<p>This is collapse data</p>

<h5>collapse 4</h5>
<p>This is collapse data</p>

Ответы [ 2 ]

1 голос
/ 09 февраля 2020

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

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        p {
            display: none;
        }

            p.active {
                display: block;
            }
    </style>

</head>
<body>
    <h5 id="collapse1">collapse 1</h5>
    <p class="collapse1">This is collapse data</p>

    <h5 id="collapse2">collapse 2</h5>
    <p class="collapse2">This is collapse data</p>

    <h5 id="collapse3">collapse 3</h5>
    <p class="collapse3">This is collapse data</p>

    <h5 id="collapse4">collapse 4</h5>
    <p class="collapse4">This is collapse data</p>

    <script>
        var classOpen = sessionStorage.getItem('className');

        $('p.' + classOpen).addClass('active');

        $('h5').on("click", function () {
            $('p').removeClass('active');

            $(this).next('p').toggleClass('active');

            var idKey = $(this).attr("id");

            window.sessionStorage.clear();
            window.sessionStorage.setItem('className', idKey);
        });
    </script>
</body>
</html>

Я надеюсь, что это поможет вам С уважением

1 голос
/ 09 февраля 2020

Поскольку вы хотите сохранить, какие элементы свернуты пользователем, вы можете сохранить индекс H5 в хранилище сеансов.

Чтобы извлечь индекс в click () используйте функцию jQuery index () : 

$('p').index(
  $(this).next('p')
)

Чтобы сохранить щелчок для локального хранилища: 

$('h5').click(function(){
   const paragraphElement = $(this).next('p');
   const elementIndex = $('p').index(paragraphElement);

   paragraphElement.toggleClass('active');
   window.sessionStorage.setItem('collapsed_state_' + elementIndex , 'active'); 
});

Наконец, чтобы свернуть элементы из sessionStorage просто l oop по всем элементам и считайте индекс как: 

$('p').each(function(index) {
  $(this).addClass(window.sessionStorage.getItem('collapsed_state_' + index));
});

Чтобы использовать localStorage , переименуйте window.sessionStorage в window.localStorage

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...