Java, UX, HTML, CSS, WEB-design

Локальное хранилище и как его использовать на веб-сайтах

Краткое описание по статье Локальное хранилище и как его использовать на веб-сайтах

Название: Локальное хранилище и как его использовать на веб-сайтах . Краткое описание: [ad_1] ⭐ Кристиа . Дата публикации: 23.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

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

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Кристиан Хайльманн

  • 0 Комментарии

Локальное хранилище и как его использовать на веб-сайтах

  • 8 минут чтения

  • Кодирование, HTML5, HTML

Краткое резюме ↬

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

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

Добавление состояния в Интернет: «Почему» локальное хранилище

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

Еще после прыжка! Продолжить чтение ниже ↓

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

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

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

  • Они увеличивают нагрузку на каждый документ, доступ к которому осуществляется в домене.
  • Они позволяют хранить до 4 КБ данных.
  • Поскольку файлы cookie использовались для слежения за поведением людей в Интернете, люди и компании, заботящиеся о безопасности, отключают их или просят каждый раз запрашивать, следует ли устанавливать файлы cookie.

Чтобы обойти проблему локального хранилища — поскольку файлы cookie являются довольно устаревшим решением проблемы — WHATWG и W3C разработали несколько спецификаций локального хранилища, которые изначально были частью HTML5, но затем были отброшены, поскольку HTML5 уже был достаточно большим. .

Использование локального хранилища в браузерах с поддержкой HTML5

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

localStorage.setItem('favoriteflavor','vanilla');

Если вы прочитаете favoriteflavor ключ, вы получите обратно «ваниль»:

var taste = localStorage.getItem('favoriteflavor');
// -> "vanilla"

Чтобы удалить предмет, вы можете использовать — вы можете догадаться? — removeItem() метод:

localStorage.removeItem('favoriteflavor');
var taste = localStorage.getItem('favoriteflavor');
// -> null

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

Решение проблемы «Только строки»

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

Вы можете увидеть это, когда попробуете следующий код:

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( 'car' ) );

Попытка этого в консоли показывает, что данные хранятся как [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( 'car' ) ) );

локальное хранилище. Кодирование в формате JSON означает, что вы сохраняете правильный формат объекта в локальном хранилище.

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

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

Локальное хранилище в Opera
Большой вид

Сделать это в Chrome немного сложнее, поэтому мы сделали скринкаст:

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

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

Вариант использования № 1: локальное хранилище данных веб-сервиса

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

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

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

if(localStorage && localStorage.getItem('thewholefrigginworld')){
  render(JSON.parse(localStorage.getItem('thewholefrigginworld')));
} else {
  $('#list').html('

‘+загрузка+’

‘); var query = ‘выберите centroid,woeid,name,boundingBox’+ ‘ from geo.places.children(0)’+ ‘ где parent_woeid=1 и placetype=»country»‘+ ‘ | сортировка (поле = «имя»)’; var YQL = ‘https://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)); } render(data); }); }

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

Код для информации о мире доступен на GitHub.

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

Это очень распространено при использовании веб-служб на стороне сервера. Локальное кэширование защищает вас от запрета на использование сервисов, а также означает, что, если по какой-либо причине вызов API завершается сбоем, у вас все равно будет информация для отображения.

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

Вариант использования № 2: поддержание состояния интерфейса простым способом

Другой вариант использования — хранение состояния интерфейсов. Это может быть как грубым, как сохранение всего HTML, так и умным, как сохранение объекта с состоянием всех ваших виджетов. Одним из примеров, когда я использую локальное хранилище для кэширования HTML интерфейса, является исследовательский интерфейс Yahoo Firehose (источник на GitHub):

Код очень простой — использование YUI3 и проверка локального хранилища вокруг вызова локального хранилища:

YUI().use('node', function(Y) {
  if(('localStorage' in window) && window['localStorage'] !== null){
    var key = 'lastyahoofirehose';

    localStorage.setItem(key,Y.one('form').get('innerHTML'));

  if(key in localStorage){
      Y.one('#mainform').set('innerHTML',localStorage.getItem(key));
      Y.one('#hd').append('

Уведомление: Мы восстановили для вас ваш последний поиск — не живые данные’); } } });

Вам вообще не нужен YUI; это только облегчает. Логика общего кэширования интерфейсов в локальном хранилище всегда одна и та же: проверьте, была ли активирована кнопка «Отправить» (в PHP, Python, Ruby или где-то еще), и, если да, сохраните innerHTML всей формы; в противном случае просто прочитайте из локального хранилища и переопределите innerHTML формы.

Темная сторона локального хранилища

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

Дальнейшее чтение на SmashingMag:

  • Автоматическое сохранение пользовательского ввода в ваших формах с помощью HTML5 и Sisyphus.js
  • Обеспечение безопасности веб-пользователей путем очистки входных данных
  • Подробное введение в Ember.js
  • Создание простого кроссбраузерного автономного списка дел

Исследования, подобные этому, показывают, что очень скоро нам нужно взглянуть на функции и надстройки HTML5 с точки зрения безопасности, чтобы убедиться, что люди не могут записывать действия пользователя и информацию без ведома пользователя. Выбор для локального хранилища, так же как вы должны согласиться поделиться своим географическим местоположением, может быть в порядке; но с точки зрения UX это считается неуклюжим и навязчивым. Есть хорошие идеи?

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Локальное хранилище и как его использовать на веб-сайтах

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»