Как сделать автосохранение текстового поля?

Question

[Дмитрий]

Есть одно обычное textarea в котором он хранит некоторые свои заметки.
Заказчику по зарез нужно, чтобы он открыл модальное окно заметок, ввел туда (в это textarea) заметки и они автосохранились.

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

Нашел решение - сохранять при вводе каждый раз через Ajax. А это будет верным решением ,что каждый раз запрос к серверу?
Есть ли альтернативы?

Answer 1

[Konstantin Malyarov]

Нет, есть вариант лучше localStorage, единственное что он не отправлять данные на сервер. Прикрутить таймер, каждые 5 секунд отправлять на сервер.

Answer 2

[Alex]

Определитесь где вы хотите хранить данные. Если заметки нужны только на одном устройстве — тогда можно хранить на клиенте. Иначе — на сервере.

Если данные будут храниться на клиенте — тогда тут всё просто:
По событию oninput сохраняете заметку в localStorage или в любом другом хранилище (благо браузеры дают выбор)

Если данные нужно отправлять на сервер то тут всё сложнее
Вам стоит применить фоновую синхранизацию. Если коротко: данные для сохраниния будут храниться локально на клиетне до тех пор, пока не будут сохранены на сервере. Если клиент в метро, в тоннеле, или ещё где-то где нет интернета, он по прежнему может написать заметку. А когда соединение с сервером будет восстановлено — заметка сохранится глобально и будет доступна на других устройствах.

Если вы хотите пойти по более простому пути тогда так:
По событию oninput запускаете функцию сохранения данных на сервер. А чтобы не перенагружать сервер применяйте функцию типа lodash.debounce:
Если текст не печатают пол секунды — отправить на сервер

Answer 3

[hzzzzl]

если сохранять на стороне клиента то так например
https://codepen.io/anon/pen/dEYpMQ?editors=1010

Answer 4

[Кирилл Горелов]

Я делал по другому, такую же задачу.

Когда в вели к текстра текст и убрали мышку, при помощи onchenge отлавливал это событие и отправлял запрос к себе в БД.
Вы можете хоть в куки писать, хоть в локалсторадже.
Отправлять запрос при каждым keyup это неправильно, много запросов может быть.

Comments

[Alex]

Следить за мышкой не стоит. Пользователь может использовать навигацию с клавиатуры.

[Дмитрий]

вот и я знаю что плохое решение при каждом keyup делать отправку.
а как вы решили так проблему: я навел мышку на область ввода , тыкнул, случайно (или специально, чтбы не мешалась) убрал мышь?
или как это решить когда действие делается в моб.версии?

[Igor Ustyugov]

Дмитрий, а если отправлять по blur?

[Кирилл Горелов]

Дмитрий, Даже если вы случайно нажали(не навели, а именно нажали), то и пусть отправится запрос.
Это все равно реже, чем отправлять каждый раз при нажатии на клавишу.

И такое бывает редко.
В конце концов, можете сделать какую нибудь проверку, что бы не отправлялось. К примеру вычитывать предыдущий хеш от текста, сравнивать с текущим и если на разные, то отправлять.

Но я бы так делать не стал бы.