Храним контент страницы в URL

Недавно я вернулся к довольно необычной и интересной идее нескольких лет давности — хранить контент страницы прямо в ссылке, ведущей к этой странице. Для предотвращения проблем с различными символами (пробел, например), можно кодировать данные в base64. Итоговую ссылку можно сократить через сервис сокращения ссылок типа bit.ly. Все, что необходимо поместить на хостинге — html-файл с js-кодом, который будет обрабатывать данные из URL. Это был всего лишь концепт. Не было ни рабочей версии, ни способа реализации. Сегодня, спустя 2-3 года, я вспомнил об этом концепте и решил воплотить его в реальность, сколь безумным или бредовым он не казался. Скорее всего, данный топик будет наиболее интересным для frontend-разработчиков.

Основная идея

Итак, еще раз. У нас имеется единственный html-файл, в котором, в свою очередь есть JavaScript-код, обрабатывающий данные из URL. Если же нам нужно подключить дополнительные файлы, такие как CSS-стили или скрипты, их можно хранить таким же способом. А если необходимо использовать картинки, их без труда можно залить на специальный бесплатный хостинг типа hostingkartinok.com или в тот же Dropbox. Пожалуй, единственная проблема, которая стоит у нас на пути — ограниченный объем данных. Разные браузеры и серверы позволяют помещать в GET-запрос строки разной длины. Просмотрев несколько исследований на эту тему, я убедился, что мы можем хранить в URL примерно 4-8 КБ текстовых данных, хотя Safari и Firefox позволяют вместить в адресной строке около 8 МБ, а у Opera вовсе нет ограничений на длину GET-запроса. 8 МБ — это более чем достаточно для одной страницы, но и тут есть преграда — в веб-сервере Apache также установлено ограничение на максимальную длину — 8190 символов. Хотя, когда речь о текстовом контенте, зачастую и 8 КБ должно хватить, поэтому этой проблемной части концепта я не уделял особого внимания.

Пример реализации

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

Получение данных из запроса

var QueryString = function () {
   var query_string = {},
   query = window.location.search.substring(1),
   vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if (typeof query_string[pair[0]] === "undefined") {
         query_string[pair[0]] = pair[1];
      } else if (typeof query_string[pair[0]] === "string") {
         var arr = [ query_string[pair[0]], pair[1] ];
         query_string[pair[0]] = arr;
      } else {
         query_string[pair[0]].push(pair[1]);
      }
   } 
   return query_string;
} ();

Как получать значение? Очень легко:

// URL: http://localhost/?data=something&foo=bar
console.log(QueryString.data); // => something
console.log(QueryString.foo); // => bar

Вывод данных

Теперь мы должны понять, какого типа данные мы ожидаем. Если предполагается, что в запросе JS-код, то выполняем его (не рекомендуется по известным причинам). Если же в запросе обычный HTML-код, его можно поместить в innerHTML нашего body.

var _body = getElementsByTagName("body")[0];
_body.appendChild(QueryString.data);

Итог

У нас есть еще один способ хранения данных — «в воздухе». Он имеет свои недостатки, такие как максимальный размер данных и громоздкость ссылки, но есть один существенный плюс — данные хранятся не на сервере, а прямо в самой ссылке, ведущей к контенту. Думаю, что в будущем кто-нибудь придумает, как можно использовать данную особенность в будущем.