Как сохранить значения инпутов с localstorage с class и id одновременно много ипутов?

Question

[Rostyk Ice]

Здраствуйте, не могу решить проблему с localstorage, у меня множество инпутов и нужно со всех сохранить значения, если по Id то все хорошо но вот если по class то начинаеться магия, так как при востановлении значений(после сохранений) скрипт работает только если ВСЕ поля были заполнены, если же не все поля заполнены то оно будет вставлять значение последнего инпута.
Вот костыль который использовал:

$('#save').on('click', function(){
    $('.forses1 .fors input[type="text"].inputse').each(function(){    
        var clas = $(this).attr('class');
        var values = $(this).val();
       localStorage.setItem(clas, values);
    });   
 });

$('#load').on('click', function(){
    $('.forses1 .fors input[type="text"].inputse').each(function(){    
        var clas = $(this).attr('class');
        var values = localStorage.getItem(clas);
        $(this).val(values);
    }); 
});

Дерево у меня вот такое:

<div id="test22">
	<div class="forses"> <!-- таких блоков 24 штуки -->
		<div class="input-field col s12 m12 l12">
            <input  id="name4" type="text" > <!-- таких инпутов с ID без class по 1 штуке в каждом .forses -->
        </div>
		<div class="fors">
			<div class="input-field col s4">
         		<input  class="inputse date1"  type="text" maxlength="5"> <!-- и таких инпутов 90 штук в каждом .fors -->
      		</div>
		</div>
		<div class="fors2">
			<div class="input-field col s4">
         		<input  class="inputse date1"  type="text" maxlength="5"><!-- и таких инпутов 90 штук в каждом .fors2  -->
      		</div>
		</div>
	</div>
</div>

А вот весь файл кому интересно :)

Спасибо.

Answer 1

[Larisa Moroz]

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

$('#save').on('click', function(){
    $('.forses1 .fors input[type="text"].inputse').each(function(index){    
        var key ='forses1-input-'+ index;
        var value = $(this).val();
       localStorage.setItem(key , value );
    }); 
});

$('#load').on('click', function(){
    $('.forses1 .fors input[type="text"].inputse').each(function(index){     
        var key ='forses1-input-'+ index;
        var values = localStorage.getItem(key);
        $(this).val(values);
    }); 
});

Comments

[Rostyk Ice]

Спасибо тебе !!!
я немножко изменил и теперь сохраняет все 4574 инпуты ))

$('#save').on('click', function(){
    $('input[type="text"]').each(function(index){    
        var key ='input-'+ index;
        var value = $(this).val();
       localStorage.setItem(key , value );
    }); 
});

$('#load').on('click', function(){
    $('input[type="text"]').each(function(index){     
        var key ='input-'+ index;
        var values = localStorage.getItem(key);
        $(this).val(values);
    }); 
});

А то я уже хотел писать для каждего блока отдельный код с ключами...)

[Rostyk Ice]

А возможно что бы было 2 варианта хранилища?
к примеру в 1 инпут вписал 1 и сохранил на кнопку К1 потом удалил 1 и написал 2 и сохранил на кнопку К2 после чего нажимал на кнопку з1 и в инпут вписалось 1 а если кнопку з2 то значение 2?