16 Июль 2020

Javascript — cохранение и восстановление введённых значений при обновлении страницы

Работаем на странице с полями для ввода данных, например заполняем какую то анкету — случайно закрыли или завис браузер, или просто обновили страницу и херак — все введённые данные пропали 🙁 знакомая ситуация? думаю что да

Для решения этой задачи на просторах родного рунета нарыл такой скриптик на нативном яваскрипте

if (window.localStorage) {
  var elements = document.querySelectorAll('[name]');
 
  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
      var name = element.getAttribute('name');
 
      element.value = localStorage.getItem(name) || '';
 
      element.onkeyup = function() {
        localStorage.setItem(name, element.value);
      };
    })(elements[i]);
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

if (window.localStorage) {

var elements = document.querySelectorAll('[name]');

for (var i = 0, length = elements.length; i < length; i++) {

(function(element) {

var name = element.getAttribute('name');

element.value = localStorage.getItem(name) || '';

element.onkeyup = function() {

localStorage.setItem(name, element.value);

};

})(elements[i]);

}

Всё бы ничего, но мне в шаблонах зачастую приходится выводить поля с уже заполненными данными из базы данных (например цена).

Собственно, для полей которые нужно запоминать я ввёл дополнительный атрибут data-save и чуток допилил скрипт, на предмет проверки данного аттрибута при восстановлении введённых ранее значений.

if (window.localStorage) {
  var elements = document.querySelectorAll('[name]');
 
  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
        var name = element.getAttribute('name');
        var save = element.getAttribute('data-save');
        if(save) {
           element.value = localStorage.getItem(name) || '';
           element.onkeyup = function() {
           localStorage.setItem(name, element.value);
        }
      };
    })(elements[i]);
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

if (window.localStorage) {

var elements = document.querySelectorAll('[name]');

for (var i = 0, length = elements.length; i < length; i++) {

(function(element) {

var name = element.getAttribute('name');

var save = element.getAttribute('data-save');

if(save) {

element.value = localStorage.getItem(name) || '';

element.onkeyup = function() {

localStorage.setItem(name, element.value);

}

};

})(elements[i]);

}

рубрики: SEO | Комментарии (0)

10 Июль 2020

Моментально отдаем файл с помощью PHP

Пост из разряда «закладка»

Сразу сама функция по отдаче файлов

function file_force_download($file) {
  if (file_exists($file)) {
    // сбрасываем буфер вывода PHP, чтобы избежать переполнения памяти выделенной под скрипт
    // если этого не сделать файл будет читаться в память полностью!
    if (ob_get_level()) {
      ob_end_clean();
    }
    // заставляем браузер показать окно сохранения файла
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename=' . basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    // читаем файл и отправляем его пользователю
    readfile($file);
    exit;
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function file_force_download($file) {

if (file_exists($file)) {

// сбрасываем буфер вывода PHP, чтобы избежать переполнения памяти выделенной под скрипт

// если этого не сделать файл будет читаться в память полностью!

if (ob_get_level()) {

ob_end_clean();

}

// заставляем браузер показать окно сохранения файла

header('Content-Description: File Transfer');

header('Content-Type: application/octet-stream');

header('Content-Disposition: attachment; filename=' . basename($file));

header('Content-Transfer-Encoding: binary');

header('Expires: 0');

header('Cache-Control: must-revalidate');

header('Pragma: public');

header('Content-Length: ' . filesize($file));

// читаем файл и отправляем его пользователю

readfile($file);

exit;

}

Взято отсюда https://habr.com/ru/post/151795/

рубрики: PHP, Полезности | Комментарии (0)

9 Июль 2020

Передача в PHP многомерного массива AJAX запросом

С многомерными массивами в javascript беда, а уж с передачей многомерного массива AJAX запросом — тем более.
Не буду долго рассказывать о своих страданиях 🙂 сразу готовое, красивое решение

data = new Object();
for (i = 0; i < games.length; i++) {  
    data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();
    data['games[' + i + '][img]']  = $(games[i]).find('.game-img').val();
    data['games[' + i + '][url]']  = $(games[i]).find('.game-url').val();
}
$.ajax({            
    url: 'games.php',
    type: "POST",
    data: data
});

Всё - ловим в games.php правильный массив $_POST

1

2

3

4

5

6

7

8

9

10

11

12

13

data = new Object();

for (i = 0; i < games.length; i++) {

data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();

data['games[' + i + '][img]'] = $(games[i]).find('.game-img').val();

data['games[' + i + '][url]'] = $(games[i]).find('.game-url').val();

}

$.ajax({

url: 'games.php',

type: "POST",

data: data

});

Всё - ловим в games.php правильный массив $_POST

рубрики: Javascript, Javascript - JQuery, Лайфхак, Полезности | Комментарии (0)

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Апр				Авг »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31