Сохранение значений 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);
});

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3, Box2D, FreeType и SDL3_ttf из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

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

Решение

Решение

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

	Сохранение значений input 03.07.2019, 16:59. Показов 12110. Ответов 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