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

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

Зачем использовать локальное сервер хранилище? Одна из серьезных проблем HTTP – это отсутствие статичности относительно состояния приложения. То есть, когда вы запускаете приложение, совершаете какие-то действия, а потом закрываете его, все параметры будут обнулены, и в следующий раз, когда вы его откроете, приложение будет девственно чистым. В то же время десктопные приложения в большинстве своем сохраняют изменения состояния.

И поэтому вам как веб-разработчику нужно где-то хранить данные об интерфейсе и состоянии приложения. Как правило, информация хранится на сервере, и для проверки исходного состояния приложения при запуске нужно проверять имя пользователя. Ну, а если вы не хотите заставлять людей использовать логин и пароль?

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

Cookies: да или нет?

Классический способ сохранять состояние приложения для конкретного пользователя – это cookies. Cookies (от англ. cookie – «печенье») – это текстовый файл, присоединенный к домену вашего веб-сайта, который хранится на компьютере пользователя. Когда пользователь открывает страницу вашего сайта, браузер «подтягивает» файл cookies и пересылает его на сервер. Но у cookies есть несколько серьезных ограничений и недостатков:

  • они вешаются при загрузке каждого документа, открытого на домене;
  • максимальный объем хранимых данных – 4 Кб;
  • cookies часто незаконно используют для слежения за поведением пользователя в cети, поэтому многие люди и компании, которые беспокоятся о своей безопасности и сохранности данных, отключают cookies (или включают опцию запроса каждый раз, когда сайт пытается поставить cookies).

Кроме того, cookies имеют еще целый ряд проблем: неточная идентификация, возможность кражи или подмены, нестабильность между клиентом и сервером и так далее.

Проблемой локального хранилища данных занялись компании WHATWG и W3C. Они написали несколько спецификаций по local storage, которые изначально были частью документации по HTML5, но затем их вынесли в отдельный раздел.

Использование локального хранилища в браузерах, совместимых с HTML5

В современных браузерах использовать локальное хранилище очень просто. Вам нужно только изменить объект localStorage в JavaScript. Вы можете сделать это непосредственно или используя метод setItem() и getItem():

localStorage.setItem(‘favoriteflavor’,‘vani

Если вы введете ключ favouriteflavour, вы получите результат vanilla:

var taste = localStorage.getItem(‘favoriteflavor�// → “vanilla”

Для того чтобы удалить объект, вы можете использовать метод removeItem():

localStorage.removeItem(‘favoriteflavor’); var taste = localStorage.getItem(‘favoriteflav// → null

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

Проблема «Strings Only»

Одна неприятная особенность local storage – это то, что вы можете использовать в ключах только переменные типа string. То есть, если у вас есть объект, сохранить его не получится.

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

var car = {}; car.wheels = 4; car.doors = 2; car.sound = ‘vroom’; car.name = ‘Lightning McQueen’; console.log( car ); localStorage.setItem( ‘car’, car ); console.log( localStorage.getItem

Если вы попробуете сделать то же самое в консоли, вы увидите, что данные хранятся как [object Object], но не как реальный объект:

Вы можете это обойти, используя методы JSON.stringify()и JSON.parse():

var car = {}; car.wheels = 4; car.doors = 2; car.sound = ‘vroom’; car.name = ‘Lightning McQueen’; console.log( car ); localStorage.setItem( ‘car’, JSON.stringify(car) ); console.log( JSON.parse( localStorage.getItem(

Где найти данные локального хранилища и как их удалить

Занимаясь написанием кода, вы наверняка иногда застреваете на месте и не понимаете, что происходит. Конечно, вы всегда можете получить доступ к данным, используя нужные методы, но иногда вы просто хотите очистить все и начать с чистого листа. В браузере Opera перейдите в меню Настройки → Расширенные→Хранилище (Preferences → Advanced → Storage), где вы увидите локальные данные всех доменов.

В Chom задача не так проста, поэтому мы сделали для вас небольшое видео:

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

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

#1: Локальное хранение данных веб-сервиса

Одно из главных применений локального хранилища – это кэширование данных из Веба, когда подтянуть их занимает слишком много времени. Вы можете посмотреть, что я имею в виду, если просмотрите запись в блоге Event Apart 10K.

Когда вы открываете демо в первый раз, названия подгружаются до 20 секунд (с сервиса Yahoo GeoPlanet). Во второй же раз вам не приходится ждать, так как все уже закэшировано на вашем компьютере при помощи local storage.

Следующий код показывает, как решить эту вот задачу. В локальном хранилище вызываете ключ, например, thewholefrigginworld при помощи метода render(), и он отображает нужную вам информацию. Или иначе: показываете show a loading message и вызываете Geo API, используя getJSON().Как только данные загрузятся, сохраните их в thewholefrigginworld и вызовите render() с теми же самыми данными:

if(localStorage && localStorage.getItem('thewholefrigginworld')){ render(JSON.parse(localStorage.getItem('thewholefrigginworld'))); } else { $('#list').html(' <p>'+loading+' '); var query = 'select centroid,woeid,name,boundingBox'+ ' from geo.places.children(0)'+ ' where parent_woeid=1 and placetype="country"'+ ' | sort(field="name")'; var YQL = 'http://query.yahooapis.com/v1/public/yql?q='+ encodeURIComponent(query)+'&diagnostics=false&format=json'; $.getJSON(YQL,function(data){ if(localStorage){ localStorage.setItem('thewholefrigginworld',JSON.stringify(data)); } r

Вот наглядная демонстрация разницы во времени загрузки:

Это очень сильный инструмент. Если веб-сервер разрешает совершать только определенное количество запросов в час, но данные не меняются настолько быстро, вы можете хранить информацию в локальном хранилище и застраховаться от превышения квоты за счет пользователей. И, например, фотография будет потягиваться каждые 6 часов, а не каждую минуту.

Это очень тривиальная ситуация. И локальное кэширование данных спасет вас от бана, а кроме того, если API по какой-то причине «упадет», у вас на сайте все равно будет рабочая информация.

Но getJSON() в jQuery совершенно неудобен, когда речь идет о доступе к сервисам и breaking their cache, как описано в этой статье. Поскольку обращение к сервису и использование getJSON() каждый раз создает уникальный URL, сервис не доставляет его кэшированную версию, а каждый раз полностью обращается к системе и базе данных. Это достаточно неудобно, поэтому вместо того лучше кэшировать информацию локально и использовать ajax().

#2: Простой способ поддерживать состояние интерфейса

Еще один вариант, когда можно использовать локальное хранилище, – это хранение состояния интерфейсов. В одних случаях это может быть столь же грубо, как хранение всего HTML кода, а в других – столь же разумно, как поддержка объекта состоянием всех ваших виджетов.

Один из примеров, когда можно использовать локальное хранилище для кэширования HTML интерфейса – это интерфейс Yahoo Forehose (код на GitHub):

Код очень прост (с использование YUI3 и тестом для вызова локального хранилища):

YUI().use('node', function(Y) { if(('localStorage' in window) && window['localStorage']!== null){ var key = 'lastyahoofirehose'; <?php if(isset($_POST['sent']) || isset($_POST['moar'])){?> localStorage.setItem(key,Y.one('form').get('innerHTML')); <?php }else{?> if(key in localStorage){ Y.one('#mainform').set('innerHTML',localStorage.getItem(key)); Y.one('#hd').append(' <p class="message"><strong>Notice:</strong> We restored your last search for you - not live data'); } <?php }?> } });

В принципе, вам не нужен YIU, он просто упрощает задачу. Общая логика кэширования данных в локальном хранилище всегда одна и та же: проверьте, активирована ли кнопка «Submit» (в РHP, Python, Ruby и т. д.), и, если да, сохраните innerHTML всей формы. Или, в ином случае, просто считайте информацию из локального хранилища и override innerHTML формы.

Темная сторона local storage

Когда появляется какая-либо сильная и мощная технология, появляются и люди, которые пытаются использовать ее для незаконных целей. Samy, создатель MySpace червя «Samy is my hero», недавно выпустил достаточно пугающее видео «Evercookie», которое показывает, как использовать практически любые методы, в том числе и локальное хранилище, чтобы собирать информацию о пользователе, даже с отключенными куки. Этот код можно использовать как угодно, и его пока что никак не обойти.

Обзоры, подобные этому, показывают, что нам нужно смотреть на аддоны и функции HTML5 в том числе и со стороны безопасности, чтобы не предоставлять никому шанса записывать действия пользователей против их воли.

Я думаю, что запрос на использование локального хранилища нужно сделать обязательным, так же как сделан запрос на получение географического положения. Но с точки зрения Unix это выглядит неуклюже и громоздко. Есть какие-нибудь идеи на этот счет?

Перевод статьи Local Storage And How To Use It On Websites с сайта www.smashingmagazine.com


Закрыть ... [X]

Локальное хранилище (local storage что это такое и как его) Цитаты про любовь с сыном

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