Практическое использование localStorage

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

И так, всё по порядку. Каждые полсекунды происходит запись из поля формы с комментарием в localStorage. Записывается не всё, а только в случае если длинна текста более четырех символов. Если вдруг страничка закроется или связь оборвется, то в хранилище останется записанная информация. После того как запись будет произведена в БД, то из хранилища будет удален текст черновика. Собственно самая проблемная часть заключается в том, что нужно удалить текст из хранилища. Нужно было продумать метод передачи информации о том, что была произведена запись и, что можно удалить черновик. Как вариант, можно было передать через GET-запрос при переадресации, но я не хочу использовать подобный метод. Мне больше понравилось использовать сессии. Через сессию я передаю информацию о том, что произошла запись.

Для того, чтобы сохранять текст комментариев я создал небольшую функцию на JavaScript:

function savecomment()
{
 window.localStorage.setItem(prefix + 'msg', document.sign.msg.value);
 window.localStorage.setItem(prefix + 'date', +new Date()); 
}

Запись ведётся не в режиме реального времени, а с паузами в полсекунды. Для того, чтобы не создавать лишние записи в хранилище, я записываю только в том случае когда длинна текста сообщения превышает четыре символа. Параллельно я решил записывать дату создания черновика. Может быть я реализую функцию просмотра черновиков или буду удалять черновики с очень давней датой. Ибо каков смысл хранить очень старые черновики? Просто человек мог начать писать комментарий, но потом забыл, соответственно черновик пролежит в хранилище до того момента как его человек опубликует. Но человек может не опубликовать запись и черновик зависнет в хранилище.

Восстанавливается текст формы из хранилища при первой загрузке странички. Сначала смотрится есть ли, что-то в localStorage и если там есть какая-либо информация, то она записывается в форму. Сначала я хотел воспользоваться innerHTML для вставки текста в форму, но потом оказалось, что при нажатии на кнопку отмены сообщения, то восстанавливалась старая информация из черновика. В общем, экспериментировал с DOM по полной. Восстановление черновика в форму я произвожу вот таким кодом:

var msg = window.localStorage.getItem(prefix + 'msg');

if (!msg) msg = '';
document.sign.msg.value = msg;

Как видите всё очень легко и очень просто.

Из доработок я думаю тут есть о чём поработать. Например, можно производить запись в хранилище при нажатии на кнопочку отправки формы. Что бы не потерять пару последних символов, которые будут введены перед отправкой сообщения. А то мало ли ли, что произойдет с сервером в момент приёма сообщения. Еще есть мысль переделать собачку срабатывающую на удаление черновика в случае удачной записи комментария на сервере.

Тонкости localStorage

Есть небольшие тонкости которые можно применять при работе с сайтами использующими localStorage в своей работе. Например, можно узнать сколько записей в вашем localStorage оставил сайт. Для этого необходимо напечатать в адресной строке следующий текст:

javascript:localStorage.length;

Но это работет только в Internet Explorer.

Так же можно удалить все записи в хранилище:

javascript:localStorage.clear();

А то мало ли, что о вас собирает тот или иной сайт. Да и мало ли как реализован механизм сбора мусора на сайте, может быть данные у вас на компьютере лежат мёртвым грузом, а удалять хранилище на всех сайтах вы не хотите. Удачных проектов. Если будут вопросы, то можете задавать их в комментариях.

Тэги: программирование

Отредактировано:2020-09-28 10:08:14