data

Способы хранения данных на клиентской части веб-приложения

Для оптимизации загрузки страницы, уменьшение количества запросов на странице, возможности работы приложения офлайн — применяются методы хранения данных на клиентской части (на front-end).

В статье расмотрим варианты хранения данных существующих на сегодняшний день. Достоинства и недостатки.

JavaScript переменные

Самый простой метод, и достаточно тривиальный — хранить информацию в переменных JavaScript, например создав для этого отдельный объект

var webStorage = {}
webStorage.countries = array ("Ukraine", "USA", "France", "Germany");
webStorage.adminLogin = "Artem";
webStorage.info = { a:1, b:2, c:3 };
alert(webStorage.AdminLogin);

В получении, обработки информации нам может быть полезен DOM и хранение текстовой информации в дата атрибутах. Это часто используется в разного рода виджетах, которые содержат специфичные значения. Это достаточно рискованный способ, так как не всегда можно спрогнозировать, как браузер или другая среда обработки кода будет интерпритировать атрибут.

var testWidget = document.getElementById("testWidget");
testWidget.setAttribute("data-welcome", "Hello on our web-site!");
testWidget.welcomeMessage = mywidget.getAttribute("data-welcome");

Достоинства:

Самое быстрое и простое решение
Не нужно заниматься сериализацией данных
Идеальное решение для одностраничных приложений

Недостатки

Данные недолговечны и хрупки — при переходе по ссылке куда-то, обновлении или закритии/восстановлении вкладки все данные затираются.
Переменные могут быть случайно перезаписаны какими то другими скриптами.

Cookies

Куски информации, которые отправляются веб-сайтом и хранятся локально.

// Сохраним запись в Cookies
document.cookie = "hello=" + escape("Hello World") + ";
path=/";

// Извлекаем данные
cookies =
    document.cookie.split(";"),
    value = null,
    regexp = new RegExp("^s*hello=(.*)$");

for (var c = 0; c < cookies.length && !value; c++) {
    var match = cookies1.match(regexp);
    if (match.length == 2) value = unescape(match[1]);
}

console.log(value);

Достоинства:

Надежный способ удержания состояния между клиентом и сервером.
После истечения сессии, закрытия вкладки или браузера - данных сохраняются.
Cookies поддерживаются всеми современными браузерами

Недостатки

Использование cookies в JavaScript крайне неудобно - прийдется использовать дополнительные библиотеки.
Cookies сохраняет только строковые данные, другие типы данных должны быть сериализированны используя такие методы, как JSON.stringify и JSON.parse.
Хранилище Cookies ограничено —не больше 20 cookies каждые 4KB.
Cookies могут быть удалены или заблокированны.
К сожалению в недавнем времени использование Cookies власти расценивают, как вмешательство в частную жизнь. В многих странах использование их ограниченно.

HTML5 Web Storage

Web Storage предоставляет два объекта с идентичными API: window.localStorage для постоянного хранения данных и code.sessionStorage для храения данных только в рамках сессии. Доменно-специфичные строки хранятся в парах name/values. В отличии от Cookies, лимит хранения информации значительно больше и информация никогда не передается на сервер.

// Поддерживается ли средой localStorage
if (typeof window.localStorage != "undefined") {

    // Хранение
    localStorage.setItem("hello", "Hello World!");

    // Вывод
    console.log(localStorage.getItem("hello"));

    // Удаление
    localStorage.removeItem("hello");
}

Достоинства

Простота в использовании, пары name/value.
Есть выбор в постоянном или временном хранении данных.
Модель событий может синхронизировать вкладки и окна.
Широкая поддержка десктопных и мобильных браузеров, включая IE8+
Web Storage polyfills доступно для поддержки старых браузеров, fall-back используется cookies и window.name хранение данных.

Недостатки

Работа только со строчными данными — необходима сериализация.
Показывает низкую производительность в обработке большого количества информации.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *