10 августа 2012 г.

Javascript LocalStorage и JSON

Все мы знаем, что практически в любом веб-приложении есть необходимость хранить некоторые данные на стороне клиента. До недавнего времени, эта необходимость решалась использованием Cookies.
Откровенно говоря, у cookies есть ряд неудобств и проблем:
  • при каждом запросе на сервер отсылаются и все куки;
  • ограничение размера в 4 kb;
  • подвержены стороннему вмешательству;
  • возможна подмена или кража cookie.
Так вот, с приходом HTML5, у нас появился прекрасный механизм работы с локальным хранилищем браузера через Javascript. И сегодня мы попробуем в этом разобраться.

Вообще, принцип работы с локальным хранилищем прост до безобразия:


   1:  localStorage.foo = 'mydata'; //сохранение данных
   2:  var a = localStorage.foo; //получение данных
   3:  delete localStorage.foo; //удаление данных

На этом можно было бы и заканчивать сей пост, но все-же я хотел бы осветить еще несколько моментов.
Как и при работе с Cookies, в LocalStorage мы можем сохранять только текстовые данные. Для половины случаев этого вполне достаточно. Но есть еще вторая половина случаев, где нужно сохранить на клиенте целый объект, с некоторым набором свойств. Конечно же, можно выйти из ситуации по-простому, и для каждого свойства делать отдельную переменную в хранилище, писать все в одну строку а потом парсить, и еще много страшных спсобов...

Так что же мы будем делать?
Давайте создадим простое приложение, которое будет сохранять в локальное хранилище пользовательские данные в виде одного, цельного объекта. Помогут нам в этом методы Javascript-а по работе с JSON данными.

Для начала сделаем форму, через которую можно ввести данные, сохранить их в хранилище, получить оттуда-же, или удалить:
После ввода всех данных, при нажатии кнопки сохранения, отрабатывает javascript-метод SetDataToStorage:

   1:  function SetDataToStorage() {
   2:      $('#container i').empty();
   3:   
   4:      var person = {};
   5:      person.FirstName = $('#fName').val();
   6:      person.LastName = $('#lName').val();
   7:      person.Age = $('#age').val();
   8:   
   9:      localStorage.currPerson = JSON.stringify(person);
  10:   
  11:      alert('Data saved to localStorage!');
  12:  };

Здесь мы создаем новый объект, и заполняем его свойства значениями с формы. Далее, с помощью метода JSON.stringify, мы преобразовываем наш объект  в текст JSON. Тоесть, мы "разложили" наш json-объект в строку, из которой потом с легкостью сможем собрать его обратно. Потом все это дело сохраняется в LocalStorage.

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

   1:  function GetStorageData() {
   2:      if (localStorage.currPerson !== undefined) {
   3:          var user = JSON.parse(localStorage.currPerson);
   4:          $('#container i').empty().append('Your name is ' + user.FirstName + ' '
                   user.LastName).append(', and you are ' + user.Age + ' years old');
   5:   
   6:      } else {
   7:          alert('no data!');
   8:      };
   9:  };

Вначале мы проверяем, существует ли в хранилище такой объект. Если да, то получаем его строковое значение, и преобразовываем в объект персоны, с помощью метода JSON.parse. Ну и в конце выводим на страницу содержимое всех нужных свойств. В итоге можно увидеть что-то такое:
С удалением данных из хранилища, думаю, все понятно. Там лишь 2 строки в методе:

   1:  function RemoveData() {
   2:      delete localStorage.currPerson;
   3:      alert('Data deleted from localStorage!');
   4:  };

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

Ну а напоследок хочу еще раз предупредить!
С локальным хранилищем нужно быть таким же аккуратным, как и с cookies! Главное - не сохранять туда важные и секретные данные.

_____
Исходники