Arhn - архитектура программирования

HTML5 — localStorage, файлы cookie и SQL

Основываясь на большом количестве результатов поиска, которые я видел на SO, функция localStorage HTML5 кажется полезной по сравнению с файлами cookie только тогда, когда вы заинтересованы в хранении больших порций данных, которые не нужно передавать на сервер. ( Локальное хранилище и файлы cookie)

Мне трудно понять, как/почему кто-то будет использовать эту функцию. Может ли кто-нибудь предоставить ссылку на реальный пример, показывающий, насколько полезен localStorage?

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

Извините, если это дубликат множества вопросов HTML5 на этом сайте. Я прочитал несколько, и ни один из них не ответил полностью на мои вопросы. Заранее спасибо!


  • Я бы всегда использовал localStorage, если данные не нужны серверу. Это позволяет избежать раздувания ваших HTTP-запросов, что особенно важно, если вы много работаете с AJAX (или загружаете много статического контента с одного и того же домена, но в любом случае это плохая идея). Мне нравится использовать localStorage для кэширования данных на стороне клиента. 25.08.2011
  • Так что я это понимаю... но, может быть, я просто не вижу общей картины. Не то чтобы я не согласен с тем, что это ценная функция... Возможно, я еще не соединил точки в реальной ситуации. Так что, по сути, это альтернатива хранению определенной информации в скрытом поле или спрятанию ее в каком-то другом фрагменте HTML для дальнейшего использования. Это звучит правильно? 25.08.2011
  • Конечно :) Например, Twitter использует его для кэширования отображения твитов. 25.08.2011

Ответы:


1

localStorage — отличное место для хранения настроек приложения, которые вы хотели бы сохранять между сеансами (в отличие от sessionStorage) и не передавать на сервер (в отличие от файла cookie). Раньше, чтобы избежать ненужной передачи настроек на основе файлов cookie на сервер, вам приходилось использовать другой субдомен только для файлов cookie.

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

То, как был реализован объект localStorage, также делает его очень простым и интуитивно понятным для использования в вашем коде. Знаете ли вы, например, что вместо использования getItem и setItem вы можете использовать localStorage, как и любой другой объект?

localStorage.someKeyName = 'someValue';
alert(localStorage.someKeyName); // alerts 'someValue'
delete localStorage.someKeyName; // removes the key

Сравните это с объемом кода, необходимого для извлечения одной записи из базы данных:

var db = openDatabase('myDb', '', '', 1024);
db.compatibleReadTransaction(function (t) {
    t.executeSql('SELECT someField FROM someTable WHERE somePrimaryKey = 1', function(t, r) {
        console.log(r.rows.item(0));
    }, function () {
        // error
    });
});

Реальный пример

Веб-приложение Guardian по адресу g.joeblade.com сохраняет все содержимое статей в localStorage. Это означает, что загрузка страницы происходит мгновенно. Если бы контент хранился в базе данных, это было бы не так быстро, поскольку каждая статья должна была бы извлекаться из базы данных асинхронно, а затем возникали накладные расходы на вызов механизма запросов SQLite, выполнение обратного вызова и т. д. на.

25.08.2011
  • Таким образом, содержимое статьи хранится в базе данных SQL, обслуживается пользователем, кэшируется локально в его базе данных localStorage, а затем в любое время в будущем на него можно ссылаться. Это звучит правильно? Означает ли это, что всегда есть проверка javascript при загрузке страницы, чтобы проверить, кэшировал ли браузер потенциально обслуживаемые данные? 25.08.2011
  • Да и да. Сценарий может выглядеть примерно так: приложение просто сохраняет в localStorage дату последнего обновления. Когда приложение запускается, оно отправляется на сервер, который возвращает любой новый контент с этой даты, который, в свою очередь, добавляется к остальному контенту в localStorage, а самый старый контент удаляется для экономии места. 25.08.2011
  • Кроме того, есть ли какая-то функция запросов в стиле ORM, встроенная в API localStorage? Например, вместо того, чтобы писать оператор SQL, я бы ссылался на элементы в БД как на объекты? например someTable.someField.Where(somePrimaryKey = 1)? 25.08.2011
  • Нет. localStorage точно такой же, как любой другой объект JavaScript, за исключением того, что значения его свойств могут быть только строками. 25.08.2011
  • Большое спасибо за помощь, Мэтт! 25.08.2011
  • Кстати, если вы хотите сохранить массив статей, скажем, вы должны закодировать его в JSON, сохранить результирующую строку в localStorage, а затем JSON-декодировать это значение при запуске вашего приложения. 25.08.2011
  • ой снэп! это отличная идея. Я думаю, я прыгаю на подножку localStorage. это звучит здорово! 25.08.2011
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..