Черновики и комментарии. Хранилище данных window.localStorage.

Черновики и комментарии

Как часто у вас случалось, что вы написали сообщение в комментариях какого-либо сайта, а отправив его оказывалось, что сайт подвис и данные пропали? А вы сталкивались с тем, что выходя в интернет через GPRS/EDGE/3G и прочее, теряли только, что написанный кусок текста? Я сталкиваюсь и с первым и со вторым вариантом довольно часто. По этому задался вопросом, а какие методы можно применить для исключения подобных ситуаций? Где можно временно сохранять небольшие куски текста для их последующего извлечения. Можно ли создавать, что-либо напоминающее черновики и хранить их локально, а не на сервере. Это позволит писать сообщения на закешировавшихся страничках, а после появления связи отправить их. О том как прошли мои исследования я посвящаю сегодняшнюю тему.

Сначала я обратил внимание на возможность использования cookie в качестве временного хранилища. Но этот метод меня совершенно не радует, ибо данные из куки-файлов постоянно гоняются между сервером и локальной тачкой, создавая паразитный трафик. Плюс, объём cookies очень сильно ограничен и недостаточен для моих задач. Куки больше подходят для хранения таких данных как имя пользователя, хэша пароля и прочих мелких данных. Но куки совершенно не подходят для хранения длинных текстов, предназначенных для локального хранения. По сути, требуется локальное хранилище, которое не будет доступно серверу и этими данными можно будет оперировать на стороне клиента не задействуя серверные возможности. На роль подобного хранилища идеально подходит объект введенный в HTML пятой версии: window.localStorage. Он поддерживается всеми современными браузерами. А по поводу поддержки старыми браузерами я пока не заикаюсь, так как предполагаю, что все мои читатели пользуются современным ПО, рекомендуемым разработчиками. Но, всё-таки проверку на поддержку этого объекта я буду делать. И так, суть эксперимента заключается в том, что бы ввести возможность ведения черновиков в формах для комментирования статей. А так же ознакомиться с объектом localStorage и научиться его использовать на благо общества.

Объект localStorage

Познакомимся с этим объектом поближе. Хранилище localStorage — это некая область данных, которая позволяет сохранить данные после закрытия окна браузера. Так же, если ваш сайт открыт в разных окнах, то все эти окна будут пользоваться единым общим массивом данных. Данные в этом хранилище сохраняются исключительно на локальном компьютере и не отсылаются серверу при каждом запросе новой странички. Размеры хранилища рекомендованы порядка пяти мегабайт, но у IE8 этот параметр порядка десяти мегабайт, а Опера при переполнении предлагает расширить хранилище. Как видите, места вполне достаточно для работы и экспериментов.

У localStorage имеется пять методов (clear, getItem, key, removeItem и setItem) и три свойства (constructor, length и remainingSpace).

Сейчас я тестирую систему с небольшим счетчиком. Меня интересует возможность его использования на различных браузерах. Но как выяснилось, хранилище было введено недавно и поддерживается только современными версиями браузеров. Если вам интересно узнать, сколько страничек вы просмотрели, то вам нужно зайти в администраторский раздел (ссылка admin в правом верхнем углу странички) и посмотреть на строчку Count. Если там стоят циферки, то это означает, что ваш браузер поддерживает работу с хранилищем. В противном же случае там будет надпись: Not storage. Может быть, потом я поменяю эту надпись на что-либо более адекватное.

UPD: реализовал этот функционал, написал об использовании в статье о практическом использовании localStorage.

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