Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите с localStorage (https://javascript.ru/forum/misc/72786-pomogite-s-localstorage.html)

wisma 26.02.2018 02:00
Помогите с localStorage
 
Есть скрипт:
$('.fn_switch').click(function(e){
        e.preventDefault();

        $(this).next().slideToggle(300);

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        }
        else {
            $(this).addClass('active');
        }
	});

Погуглив попробывал этот код:

$('.fn_switch').click(function(e){
        e.preventDefault();

        $(this).next().slideToggle(300);

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
			window.localStorage.hasActiveClass = 'active';
        }
        else {
            $(this).addClass('active');
			window.localStorage.hasActiveClass = '';
        }
			var hasClass = window.localStorage.hasActiveClass || '';
		if (JSON.parse(hasClass)) {
			$('.fn_switch').addClass("active");
		}
	});



Разметка в html
<div class="h2 filter_name fn_switch" data-vkladka="1">Вес <i class="angle_icon"></i></div>
			
                <div class="filter_group">
                    
                    <div class="filter_item">
                                               ****
                    
                </div>
                            
                <div class="h2 filter_name fn_switch active" data-vkladka="2">Страна производитель
				<i class="angle_icon"></i>
				</div>
			
                <div class="filter_group" style="display: none;">
                    
                    <div class="filter_item">
                                           *******
                        </div>
                    
                </div>


И при обноввлении страницы вкладки которым присвоен был класс active не запомнился(

помогите пожалуйста(

j0hnik 26.02.2018 03:11 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem('ind', JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem('ind'));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>


как вариант индексы запомнить

wisma 26.02.2018 03:47
Цитата:
Сообщение от j0hnik (Сообщение 479163) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem('ind', JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem('ind'));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active');
			}	
		});

	</script>
</body>
</html>


как вариант индексы запомнить
Оно то работает, но у меня не хочет :(
исходной код вообще сайта можно глянуть на xpro.com.ua, тестирую до полной работы на локалке(

Я даже менял названия класса fn_switch на другой, но толку не дало(
Там-же можно и увидеть что при добавлении класса active следующему диву ставится 
style="display:block;"

А вот если обновить страничку, то выходит что класс Актив он добавляет, но следующий блок без display:block; (

j0hnik 26.02.2018 04:08
добавил next().show()

пост обновил

j0hnik 26.02.2018 04:11
Я то думал у вас совсем не работает ничего, а тут мелочь такая, соседний блок показать

wisma 26.02.2018 04:37
Цитата:
Сообщение от j0hnik (Сообщение 479166)
Я то думал у вас совсем не работает ничего, а тут мелочь такая, соседний блок показать

:dance: Все отлично и супер, но есть небольшое НО, возможно ли это все привязать допустим к 

<div class="h2 filter_name fn_switch" data-switch="тут уникальный айди">



data-switch? т.к. генерировать уникальное числовое значение мы (точнее движок) там может.... А если через индексы то выходит в других категориях товарах, с другими фильтрамы автоматом active привязывает к другим елементам, и выходит не удобно

j0hnik 26.02.2018 04:39
wisma,
если это нужно на одной странице, лучше проверять ее адрес, и если тот загружать из localStorage

wisma 26.02.2018 04:44
Цитата:
Сообщение от j0hnik (Сообщение 479168)
wisma,
если это нужно на одной странице, лучше проверять ее адрес, и если тот загружать из localStorage
Это используется на 120 страницах допустим, и на каждой странице свои значения, но суть я понял, а теперь последний вопрос, как же это реализировать?

Или при использовании проверки через data и множеству значений мы получим очень большой файл хранилища?

j0hnik 26.02.2018 04:51 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			var adr = document.location.pathname; // станица
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem(adr, JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem(adr));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>


должно сработать

wisma 26.02.2018 04:55
Цитата:
Сообщение от j0hnik (Сообщение 479170)

должно сработать
:victory: Спасибо огромное!) Все отлично работает)

wisma 26.02.2018 13:28
Цитата:
Сообщение от j0hnik (Сообщение 479170) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch">1</div><div></div>
	<div class="fn_switch">2</div><div></div>
	<div class="fn_switch">3</div><div></div>
	<div class="fn_switch">4</div><div></div>
	<div class="fn_switch">5</div><div></div>
	<div class="fn_switch">6</div><div></div>
	<div class="fn_switch">7</div><div></div>

	<script>
		$(function(){

			var adr = document.location.pathname; // станица
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return i;
				});

				localStorage.setItem(adr, JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem(adr));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes(i);
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>


должно сработать
Все бы хорошо, но у меня движок генерирует дополнительные адресса страниц, и выходит что при выборе определенных с-в меняется адресс странички, а вот все таки как заставить работать по допустим data-name="value"?


<div class="fn_switch" data-name="12">1</div><div></div>
	<div class="fn_switch" data-name="17">2</div><div></div>
	<div class="fn_switch" data-name="32">3</div><div></div>
	<div class="fn_switch" data-name="15">4</div><div></div>
	<div class="fn_switch" data-name="99">5</div><div></div>
	<div class="fn_switch" data-name="120">6</div><div></div>
	<div class="fn_switch" data-name="112">7</div><div></div>

wisma 26.02.2018 15:07
Или допустим по 
<div class="fn_switch" id="12">1</div><div></div>
2
    <div class="fn_switch" id="17">2</div><div></div>
3
    <div class="fn_switch" id="32">3</div><div></div>
4
    <div class="fn_switch" id="15">4</div><div></div>
5
    <div class="fn_switch" id="99">5</div><div></div>
6
    <div class="fn_switch" id="120">6</div><div></div>
7
    <div class="fn_switch" id="112">7</div><div></div>

я могу генерировать любое уникальное число....

Ну я про то что после class="fn_switch" записывать что-то и это запоминать и выводить...

wisma 26.02.2018 19:08
up

j0hnik 26.02.2018 19:38
решение как вы хотите конечно же есть, но для этого id или какой то иной тег должен быть уникальный на всем сайте, а не только на странице..

все тоже самое только надо будет запоминать все идентификаторы с классом active.

wisma 26.02.2018 19:42
Цитата:
Сообщение от j0hnik (Сообщение 479251)
решение как вы хотите конечно же есть, но для этого id или какой то иной тег должен быть уникальный на всем сайте, а не только на странице..

все тоже самое только надо будет запоминать все идентификаторы с классом active.
А как это реализировать? Уникальный айди генерируется для всего сайта.

Я js вообще не понимаю :(

j0hnik 26.02.2018 19:44
id будет или data-name?

wisma 26.02.2018 19:45
Цитата:
Сообщение от j0hnik (Сообщение 479255)
id будет или data-name?
лучше я думаю data-name

рони 26.02.2018 19:48
localStorage запоминание кликнутых элементов
 
wisma,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
    .active{
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="fn_switch" data-name="12">1</div><div></div>
  <div class="fn_switch" data-name="17">2</div><div></div>
  <div class="fn_switch" data-name="32">3</div><div></div>
  <div class="fn_switch" data-name="15">4</div><div></div>
  <div class="fn_switch" data-name="99">5</div><div></div>
  <div class="fn_switch" data-name="120">6</div><div></div>
  <div class="fn_switch" data-name="112">7</div><div></div>


  <script>
$(function() {
  var obj = JSON.parse(localStorage.getItem("obj") || "{}");
  $(".fn_switch").each(function(indx, el) {
    var num = $(el).data("name");
    $(el).click(function(e) {
      e.preventDefault();
      $(el).toggleClass("active").next().slideToggle(300);
      obj[num] = $(el).hasClass("active");
      localStorage.setItem("obj", JSON.stringify(obj));
    });
    obj[num] && $(el).addClass("active").next().slideDown();
  });
});
  </script>
</body>
</html>

j0hnik 26.02.2018 19:53 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch" data-name="11">1</div><div></div>
	<div class="fn_switch" data-name="12">2</div><div></div>
	<div class="fn_switch" data-name="13">3</div><div></div>
	<div class="fn_switch" data-name="14">4</div><div></div>
	<div class="fn_switch" data-name="15">5</div><div></div>
	<div class="fn_switch" data-name="16">6</div><div></div>
	<div class="fn_switch" data-name="17">7</div><div></div>

	<script>
		$(function(){
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return $(el).attr('data-name');
				});

				localStorage.setItem('a', JSON.stringify(arr));
			});

				$('.fn_switch').filter(function(i){
					return 	JSON.parse(localStorage.getItem('a')).includes($(this).attr('data-name'));
				}).addClass('active').next().show();
		});

	</script>
</body>
</html>


	</script>
</body>
</html>

рони 26.02.2018 20:00
j0hnik,
не работает ... возможно мои браузеры устарели :lol:

wisma 26.02.2018 20:00
Цитата:
Сообщение от j0hnik (Сообщение 479262) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch" data-name="11">1</div><div></div>
	<div class="fn_switch" data-name="12">2</div><div></div>
	<div class="fn_switch" data-name="13">3</div><div></div>
	<div class="fn_switch" data-name="14">4</div><div></div>
	<div class="fn_switch" data-name="15">5</div><div></div>
	<div class="fn_switch" data-name="16">6</div><div></div>
	<div class="fn_switch" data-name="17">7</div><div></div>

	<script>
		$(function(){
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return $(el).attr('data-name');
				});

				localStorage.setItem(adr, JSON.stringify(arr));
			});

			var arr = JSON.parse(localStorage.getItem(adr));
			if(arr){
				$('.fn_switch').filter(function(i){
					return arr.includes($(this).attr('data-name'));
				}).addClass('active').next().show();
			}	
		});

	</script>
</body>
</html>
Если кликнуть на самой странице - и обновить, все прекрасно запоминает, если перейти на другие страницы и там пооткрывать и позакрывать - все запоминает, а вот если в самом свойстве выбрать какой-то елемент то создается совершенно новая ссылка, и выходит что не запоминает....

рони 26.02.2018 20:05
wisma,
не надо целиком копировать сообщения, 18 пост смотрели?

wisma 26.02.2018 20:06
Цитата:
Сообщение от рони (Сообщение 479258)
wisma,
спасибо, запоминает и работает с любыми значениями. Да, первый раз попробывал, не заработало, потом увидел что вы обновили пост и перепроверил, спасибо еще раз.

j0hnik 26.02.2018 20:18
рони,
Это не браузер, а я

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch" data-name="11">1</div><div></div>
	<div class="fn_switch" data-name="12">2</div><div></div>
	<div class="fn_switch" data-name="13">3</div><div></div>
	<div class="fn_switch" data-name="14">4</div><div></div>
	<div class="fn_switch" data-name="15">5</div><div></div>
	<div class="fn_switch" data-name="16">6</div><div></div>
	<div class="fn_switch" data-name="17">7</div><div></div>

	<script>
		$(function(){
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return $(el).attr('data-name');
				});

				localStorage.setItem('a', JSON.stringify(arr));
			});

				$('.fn_switch').filter(function(i){
					return 	JSON.parse(localStorage.getItem('a')).includes($(this).attr('data-name'));
				}).addClass('active').next().show();
		});

	</script>
</body>
</html>


	</script>
</body>
</html>

wisma 28.02.2018 23:34 
<div class="filter_group " style="display: block;">
                <-- первый вариант имеет постоянно включеную галочку везде по умолчанию -->
                <div class="filter_item ">
                                        <a class="filter_link checked" href="#">
                        <i class="filter_indicator"></i>
                        <span data-language="features_all">Все</span>
                    </a>
                </div>
      <-- остальные варианты проклациваются и в случае нажатия сохраняется выбор, он уже сохраняется в движке -->
                <div class="filter_item">
					 <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Acer</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Lenovo</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Huawei</span>
                        </a>
                    </div>
                            </div>

Подскажите пожалуйста, при таком условии что первый вариант в движке по дефолку включается, можно на автомате держать их закрытыми? Но если первый вариант не имеет свойства filter_link:checked то открывать меню? Точнее как, сейчас скрипт запоминает открытие, но если пользователь ничего не выбрал - он дальше этот блок держит открытым...

j0hnik 01.03.2018 00:34
можно на css
.checked{
display:none
}

wisma 01.03.2018 00:38
Цитата:
Сообщение от j0hnik (Сообщение 479475)
можно на css
.checked{
display:none
}
Тогда выйдет что при .checked на любом свойстве будет все закрыто, а нужно при filter_item:first .checked


.filter_item:first .checked {display:none;}
не помогло

j0hnik 01.03.2018 00:43
если первого у блока с классом filter_item есть класс checked тогда скрывать, верно?

j0hnik 01.03.2018 00:55
[class="filter_item checked"]:first-of-type{
display: none;
}

wisma 01.03.2018 01:26 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>
		.active{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="fn_switch" data-name="11">1</div>
<div class="filter_group " style="display: block;">
                <-- первый вариант имеет постоянно включеную галочку везде по умолчанию -->
                <div class="filter_item ">
                                        <a class="filter_link checked" href="#">
                        <i class="filter_indicator"></i>
                        <span data-language="features_all">Все</span>
                    </a>
                </div>
      <-- остальные варианты проклациваются и в случае нажатия сохраняется выбор, он уже сохраняется в движке -->
                <div class="filter_item">
					 <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Acer</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Lenovo</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Huawei</span>
                        </a>
                    </div>
                            </div>
	<div class="fn_switch" data-name="12">2</div>
<div class="filter_group " style="display: block;">
                <-- первый вариант имеет постоянно включеную галочку везде по умолчанию -->
                <div class="filter_item ">
                                        <a class="filter_link checked" href="#">
                        <i class="filter_indicator"></i>
                        <span data-language="features_all">Все</span>
                    </a>
                </div>
      <-- остальные варианты проклациваются и в случае нажатия сохраняется выбор, он уже сохраняется в движке -->
                <div class="filter_item">
					 <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Acer</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Lenovo</span>
                        </a>
                    </div>
                                    <div class="filter_item">
                                                <a class="filter_link" href="#">
                             <i class="filter_indicator"></i>
                            <span>Huawei</span>
                        </a>
                    </div>
                            </div>
	<div class="fn_switch" data-name="13">3</div><div>....</div>
	<div class="fn_switch" data-name="14">4</div><div>....</div>
	<div class="fn_switch" data-name="15">5</div><div></div>
	<div class="fn_switch" data-name="16">6</div><div></div>
	<div class="fn_switch" data-name="17">7</div><div></div>

	<script>
		$(function(){
			
			$('.fn_switch').click(function(e){

				e.preventDefault();

				$(this).next().slideToggle(300);


				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}
				else {
					$(this).addClass('active');
				}

				var arr = $.map($('.fn_switch'), function(el, i){
					if($(el).hasClass('active')) return $(el).attr('data-name');
				});

				localStorage.setItem('a', JSON.stringify(arr));
			});

				$('.fn_switch').filter(function(i){
					return 	JSON.parse(localStorage.getItem('a')).includes($(this).attr('data-name'));
				}).addClass('active').next().show();
		});

	</script>
</body>
</html>


	</script>
</body>
</html>


я имел ввиду вот так... Скрипт же открывает блок, а в ксс я и так могу скрыть...

Сейчас он у нас открывает блок и запоминает то что открылось, но если пользователь ничего не выбрал - он дальше держит открытым блок, если зайти через энное время то блок будет открытым, но а как тогда его скрывать при выборе ВСЕ? 
<span data-language="features_all">Все</span>




fn_switch > filter_group > filter_item > filter_link checked
.filter_group .filter_item .checked:first-of-type{
display: none;
}

Так он скрывает только надпись Все...

wisma 01.03.2018 14:11
up


Часовой пояс GMT +3, время: 19:57.