Сохранение значений input

@DenisLTB · Регистрация: 29.01.2016

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите, пожалуйста как быть?
Пользователь вводит значения в input, далее происходят манипуляции с интегрированной ИС, и после выполнения необходимо обновить страницу, но при этом сохранить текущее состояние input'ов

@Пифагор · 03.07.2019, 17:03

DenisLTB, думаю, поможет LocalStorage

@Mr_Sergo · 03.07.2019, 20:06

Сообщение от DenisLTB

но при этом сохранить текущее состояние input'ов

Всех или каких-то конкретно? Если каких-то конкретно- то показывайте свои инпуты

Если всех -> https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
5
6
<h3>Введите значения в инпуты и обновите страницу</h3>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

JavaScript
1
2
3
4
5
window.addEventListener('unload',() => localStorage.setItem('vals', [...document.querySelectorAll('input[type="text"]')].map((e,i) => e.value)) );
 
let vals = localStorage.getItem('vals') ? localStorage.getItem('vals').split`,` : '';
let inp = document.querySelectorAll('input[type="text"]');
for(let i = 0; i < inp.length; i++) vals[i] ? inp[i].value = vals[i] : '';

@DenisLTB · 04.07.2019, 09:38 **[ТС]**

Конкретные

HTML5
1
2
3
                  <label for ="datepicker">Выберите период срока&nbsp;&nbsp;&nbsp;</label><input type="text" class="DatePicker" id="RegDateBegin" />&nbsp;-&nbsp;<input type="text" class="DatePicker" id="RegDateEnd" />          
                  <p><label for="firstname">Содержит текст: </label>
                 <input type="text" class="pole" id="firstname" name="firstname" />

@Mr_Sergo · 04.07.2019, 19:10

Сообщение от DenisLTB

Конкретные

https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
5
6
7
8
<label for ="datepicker">Выберите период срока&nbsp;&nbsp;&nbsp;</label>
 
<input type="text" class="DatePicker save" id="RegDateBegin" />&nbsp;-&nbsp;
<input type="text" class="DatePicker save" id="RegDateEnd" />         
 
<p><label for="firstname">Содержит текст: </label>
 
<input type="text" class="pole save" id="firstname" name="firstname" />

JavaScript
1
2
3
4
5
let inp = document.querySelectorAll('.save'),
    vals = localStorage.getItem('vals') ? localStorage.getItem('vals').split`,` : '';
 
for(let i = 0; i < inp.length; i++) vals[i] ? inp[i].value = vals[i] : '';
window.addEventListener('beforeunload',() => localStorage.setItem('vals', [...inp].map(e => e.value)) );

Инпутам добавлен класс

@DenisLTB · 05.07.2019, 14:45 **[ТС]**

Вижу, что на отладчике работает, у меня почему то значение inp.length показывает 0, хотя свойству class зада наименование text

Добавлено через 2 часа 12 минут
Подскажите, пожалуйста, если запускать страничку локально с компьютера, то он и не должен отрабатываться?

@Mr_Sergo · 05.07.2019, 14:52

Сообщение от DenisLTB

почему то значение inp.length показывает 0

Значит вы не назначили класс save инпутам

Добавлено через 2 минуты

Сообщение от DenisLTB

если запускать страничку локально с компьютера, то он и не должен отрабатываться?

Должно все работать.

@Mr_Sergo · 05.07.2019, 14:55

DenisLTB, save-inputs.zip Скачайте, распакуйте архив и запустите index.html. Все работает?

@DenisLTB · 05.07.2019, 17:41 **[ТС]**

Все отлично работает, а тут не понятно

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
      <div id="filter">
            <fieldset> 
                  
                  <form id = "filter">
                  <legend>Главная панель</legend>
                  <label for ="datepicker">Выберите период срока&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" class="DatePicker save" id="RegDateBegin" />&nbsp;-&nbsp;
                  <input type="text" class="DatePicker save" id="RegDateEnd" />       
                  <p><label for="firstname">Содержит текст: </label>
                 <input type="text" class="pole save" id="firstname" name="firstname" />
                  <p><input style="width:150px; height: 30px; background:#FFA500; color:#fff;" type="button" value="Применить фильтр" onclick = "FindTask()">'&nbsp;&nbsp;&nbsp;<input style="width:150px; height: 30px; background:#FFA500; color:#fff;" type="button" value="Обновить" onclick = "FindTask()">'
                  <p><input style="width:200px; height: 30px; background:#FFA500; color:#fff;" type="button" value="Сформировать Excel файл" onclick = "CreateExcelFile()">'&nbsp;&nbsp;&nbsp;<input style="width:150px; height: 30px; background:#00CC00; color:#fff;" type="button" value="Перенести срок" onclick = "ConvertHTMLToJSON()">&nbsp;&nbsp;&nbsp;<input style="width:150px; height: 30px; background:#CC0000; color:#fff;" type="button" value="Отказать в переносе" onclick = "ExecuteError()">
                
                </form>
            </fieldset>
            <p>
      </div>

JavaScript
1
2
3
4
5
6
7
8
9
    <script>
            let inp = document.querySelectorAll('.save'),
                vals = localStorage.getItem('vals') ? localStorage.getItem('vals').split`,` : '';
 
            for(let i = 0; i < inp.length; i++) vals[i] ? inp[i].value = vals[i] : '';
            window.addEventListener('beforeunload',() => localStorage.setItem('vals', [...inp].map(e => e.value)) );
 
 
    </script>

Добавлено через 6 минут
В IE работает

Спасибо, мне достаточно по IE, так как все равно будет отрабатываться на компоненте webcontrol

Добавлено через 2 часа 18 минут
Можно вас попросить, vals = localStorage.getItem('vals') ? localStorage.getItem('vals').split`,` : ''; можно раскидать в 3 строчки? или 2? язык JS я не знаю, поэтому за работоспособность не могу быть уверен, не совсем понимаю, что за знак вопроса, отладчик ругается на эту строку, мол нету ";"

@Mr_Sergo · 05.07.2019, 18:18

DenisLTB,

https://codepen.io/Mr_Sergo/pe... itors=1010

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var inp = document.querySelectorAll('.save'), vals;
 
if(localStorage.getItem('vals')){
    vals = localStorage.getItem('vals').split(',');
}
 
for(var i = 0; i < inp.length; i++){
    if(vals[i]){
        inp[i].value = vals[i];
    }
}
 
window.addEventListener('beforeunload',function(){
    localStorage.setItem('vals', [...inp].map(function(e){
        return e.value;
    }));
});

@DenisLTB · 08.07.2019, 15:47 **[ТС]**

Спасибо, работает отлично, но почему-то ругается, что синтаксическая ошибка в этой строке

JavaScript
1
2
3
            localStorage.setItem('vals', [...inp].map(function(e){
                return e.value;
            }));

@DenisLTB · 11.07.2019, 12:03 **[ТС]**

Не сможете помочь, я понимаю логика webcontrolа немного отличается, и не всегда понятна )))

@DenisLTB · 12.07.2019, 10:57 **[ТС]**

Нашел причину, метод .map не поддерживаем ie 8,
Даже если указываю явно

HTML5
1
<meta http-equiv="X-UA-Compatible" content="IE=11">

все равно не помогает

@Mr_Sergo · 12.07.2019, 14:29

DenisLTB,

https://codepen.io/Mr_Sergo/pe... itors=1010

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var inp = document.querySelectorAll('.save'), vals;
 
if(localStorage.getItem('vals')){
    vals = localStorage.getItem('vals').split('*|*');
}
 
for(var i = 0; i < inp.length; i++){
    if(vals[i]){
        inp[i].value = vals[i];
    }
}
 
window.addEventListener('beforeunload',function(){
    var tmp = '';
    for(var i = 0; i < inp.length; i++){
        tmp += inp[i].value + '*|*';
    }
    localStorage.setItem('vals', tmp);
});

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

Сохранение значений input

Решение

Решение

@DenisLTB 0 / 0 / 1 Регистрация: 29.01.2016 Сообщений: 117

	Сохранение значений input 03.07.2019, 16:59. Показов 12038. Ответов 13 Метки нет (Все метки) Добрый день, подскажите, пожалуйста как быть? Пользователь вводит значения в input, далее происходят манипуляции с интегрированной ИС, и после выполнения необходимо обновить страницу, но при этом сохранить текущее состояние input'ов 0

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	03.07.2019, 17:03
	DenisLTB, думаю, поможет LocalStorage 0

@DenisLTB 0 / 0 / 1 Регистрация: 29.01.2016 Сообщений: 117
	05.07.2019, 14:45 [ТС]
	Вижу, что на отладчике работает, у меня почему то значение inp.length показывает 0, хотя свойству class зада наименование text Добавлено через 2 часа 12 минут Подскажите, пожалуйста, если запускать страничку локально с компьютера, то он и не должен отрабатываться? 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	05.07.2019, 14:55
	DenisLTB, save-inputs.zip Скачайте, распакуйте архив и запустите index.html. Все работает? 0

@DenisLTB 0 / 0 / 1 Регистрация: 29.01.2016 Сообщений: 117
	11.07.2019, 12:03 [ТС]
	Не сможете помочь, я понимаю логика webcontrolа немного отличается, и не всегда понятна ))) 0