От старых файлов cookie к новым альтернативам.

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

Показатель

  • Печенье
  • API веб-хранилища (LocalStorage && Session Storage)
  • IndexDB
  • CacheStorage

Печенье

HTTP cookie или cookie - это только данные, хранящиеся в небольших текстовых файлах на вашем компьютере, и они являются самой ранней формой клиентского хранилища, широко используемой в Интернете.

Файлы cookie были разработаны в 1994 году Лу Монтулли, инженером-основателем Netscape Communications, и они сделали возможной тележку для покупок в электронной коммерции. Вначале файлы cookie по умолчанию принимались всеми поддерживаемыми браузерами, и очень немногие конечные пользователи имели представление об их присутствии, что могло их вызвать.

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

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

API веб-хранилища

Веб-хранилище или хранилище DOM предоставляет веб-приложения и API для хранения данных на стороне клиента, поддерживающие постоянное хранилище данных, сопоставимое с файлами cookie, но с лучшим программным интерфейсом, большей емкостью (не менее 5 МБ) и без информации, хранящейся в заголовках запросов или передаваемой к серверу.

Интернет-хранилище для каждого источника (для каждого домена и протокола). Все страницы из одного источника могут хранить одни и те же данные и получать к ним доступ.

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

Чтобы хранить объекты, вам нужно будет преобразовать их в строки. Для этого мы используем метод JSON.stringify () перед переходом в setItem ():

const car = {
    brand: "Ford",
    model: "Sierra",
}
window.localStorage.setItem('car', JSON.stringify(car));

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

JSON.parse(window.localStorage.getItem('car'));
//{brand: "Ford", model: "Sierra"}

В двух структурах браузера есть два основных типа веб-хранилищ: локальное хранилище и хранилище сеансов. Первый сохраняет данные после закрытия и повторного открытия браузера, а второй сохраняет данные, пока браузер открыт.

Пример использования localStorage:

1: Проверьте поддержку браузера.
2: Сохраните в имени ключа значение «Rick».
3: Получите значение по ключу «name».
4. Если ваш браузер не поддерживает поддержите API веб-хранилища, запишите ошибку.

Создайте файл exampleWebStorage.html со следующим кодом и откройте его в браузере:

<!DOCTYPE html>
<html>
<body>
<h1>Example using WebStorage (local-storage)</h1>
<script>
//1
 if (typeof(Storage) !== "undefined") {
//2
  localStorage.setItem("name", "Rick");
 
  //3 
  console.log(localStorage.getItem("name"));
  //Rick
}else{
  //4   
  console.log("your browser doesn’t support local storage!");    
}
</script>
</body>
</html>

Теперь, если вы загрузите файл index.html в современном браузере, таком как chrome, и откроете инструменты разработчика на вкладке «Приложение», вы увидите свое «имя» ключ-значение, хранящееся в локальном хранилище вашего браузера:

Затем выполните в инструментах разработчика на вкладке консоли следующую команду для удаления атрибута name из localStorage:

localStorage.removeItem("name");

И окончательный результат:

Объект sessionStorage эквивалентен объекту localStorage, но хранит данные только для одного сеанса, и данные удаляются, когда пользователь закрывает вкладку браузера.

Если вы используете npm или другой менеджер зависимостей, вы можете использовать одну из многих библиотек, построенных на основе API веб-хранилища, которая предоставляет нам полезные вспомогательные методы для использования веб-хранилища.

IndexDB

IndexedDB - это база данных NoSQL (по сути, простая база данных с плоскими файлами), которую вы можете использовать во всех современных браузерах для хранения «неограниченного» объема данных и выполнения запросов к ним, как если бы вы это делали в базе данных NoSql. (Если вы хотите использовать SQL, вам не обойтись с IndexDB.)

Раньше у нас был WebSQL, оболочка для SQLite, но теперь она устарела и не поддерживается некоторыми современными браузерами. Кроме того, он никогда не был признанным стандартом, поэтому его не следует использовать.

В IndexDB база данных является частной для домена, поэтому любой другой сайт не может получить доступ к другим хранилищам IndexedDB. IndexDB поддерживает транзакции и управление версиями, а его API в основном асинхронный, а это означает, что выполнение дорогостоящих операций не заблокирует поток пользовательского интерфейса, что ухудшит работу пользователей.

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

В наших магазинах мы можем использовать такой набор данных, как:

  • числа
  • нить
  • объекты
  • массивы
  • даты

Давайте посмотрим на пример. Создайте файл exampleIndexDB.html (или любое другое имя по вашему выбору) со следующим кодом и откройте его в своем браузере:

Обратите внимание, что мы используем прослушиватели событий, потому что IndexedDB использует асинхронный API.

<!DOCTYPE html>
<html>
<body>
<h1>Example using IndexDB</h1>
<div id="divId"></id>
<script>
let myRId= document.getElementById('myResultId');
let i = 0;
const versionDB = 1;
//1
let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
//2
var open = indexedDB.open("CarDatabase", versionDB);
//3
open.onupgradeneeded = function(){
 let db = open.result;
 let store = db.createObjectStore("CarsTable", {keyPath: "id"});
 let index = store.createIndex("CIndex", ["brand", "model"]);
};
//4
open.onsuccess = function(){
//5
 let db = open.result;
//6
 let tx = db.transaction("CarsTable", "readwrite");
//7
 let store = tx.objectStore("CarsTable");
//8  
 let index = store.index("CIndex");
//9
 store.put({id: 1, brand: "Ford", model: "Sierra"});
 store.put({id: 2, brand: "Mercedes", model: "500"});
 
 //10
 let getAll = store.getAll();
getAll.onsuccess = function(){
  for(i=0; i<getAll.result.length ;i++)
    divId.innerHTML += getAll.result[i].brand+"- 
    "+getAll.result[i].model+
    " <br>";
 }
//11 
 tx.oncomplete = function(){
  db.close();
 };
}
</script>
</body>
</html>
  1. Получите indexDB. Мы включаем префиксы реализаций, которые вы хотите протестировать.
  2. Мы открываем базу данных в версии 1 с именем CarDatabase и возвращаем запрос на базу данных (асинхронный запрос).
  3. Свойство «onupgradeneeded» интерфейса IDBOpenDBRequest является обработчиком события «upgradeneeded», запускаемого при загрузке базы данных с номером версии, превышающей номер существующей сохраненной базы данных.
  4. Обработчик события «onsuccess» интерфейса IDBRequest обрабатывает событие успеха, срабатывающее, когда результат запроса успешно возвращен.
  5. Запустите транзакцию и выполните операцию чтения.
  6. При использовании свойства только для чтения, если запрос завершился неудачно и результат недоступен, выдается исключение InvalidStateError.
  7. Метод objectStore () интерфейса IDBTransaction возвращает объект магазина, который уже был добавлен в область этой транзакции.
  8. Метод index () интерфейса IDBObjectStore создает именованный индекс в текущем хранилище объектов.
  9. Добавьте данные.
  10. Запрос на получение всех данных.
  11. Обработчик события «oncomplete» интерфейса IDBTransaction обрабатывает событие complete, срабатывающее при завершении транзакции.

Удаляем запись из БД по его id:

store.delete(2);

CacheStorage

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

Хотя мы привыкли связывать CacheStorage с рабочими службами, CacheStorage не является API-интерфейсом Service Worker. Тем не менее, он позволяет работникам службы кэшировать сетевые запросы-ответы, чтобы обеспечить автономные возможности, когда у пользователя нет подключения.

CacheStorage также можно использовать в DOM в качестве утилиты хранения.

Давайте посмотрим на пример использования CacheStorage в DOM. Создайте файл exampleCS.html (или любое другое имя, которое хотите) со следующим кодом и откройте его в своем браузере:

<!DOCTYPE html>
<html>
<body>
<h1>Example using WebStorage (local-storage)</h1>
<script>
const CACHE_NAME = 'myCache’;
//1
 if ('caches' in window) {
//2
  caches.open(CACHE_NAME).then((cache) => {
     
    console.log("Cached created");
      
    //3  
    cache.add("Character", { name: "Rick", lastName: "grimes"   
    }).then( () => console.log("character added"));
}).catch((err) => {
      //error
  })
}</script>
</body>
</html>
  1. Проверьте поддержку браузера.
  2. Мы используем метод «open» с именем нашего кеша для поиска имени кеша в его списке кешей. Если Cache существует, то верните Cache со ссылкой на имя кеша, в других случаях он создает новый Cache.
  3. Добавьте запись в кэш.

Повторите попытку записи из кеша:

function get(cacheName, entry) {
  return window.caches.open(cacheName).then(function(cache) {
    return cache.match(entry);
  });
}

Удаляет запись из кеша:

function remove(cacheName, entry) {
  return window.caches.open(cacheName).then(function(cache) {
    return cache.delete(entry);
  });
}
remove("Rirck");

Заключение

В этом коротком посте мы рассмотрели наиболее распространенные способы сохранения данных на стороне клиента. Как мы видели в различных примерах, все формы кэширования очень просты в использовании, но в indexDB и CacheStorage лимит хранилища больше.

При хранении сеанса данные доступны только во время сеанса страницы, но в других случаях данные остаются до тех пор, пока явно не будут удалены. В конце концов, все зависит от того, что вам нужно. Для простых вещей, когда вам не нужно хранить много данных, вам может хватить Web Storage API, но в других случаях вам может потребоваться IndexDB.

CacheStorage используется с Service Workers, хотя вы можете использовать его в DOM. Вместо этого LocalStorage / SessionStorage недоступен для веб-воркеров или сервис-воркеров.

использованная литература



MDN Web Docs
Сайт MDN Web Docs предоставляет информацию об открытых веб-технологиях, включая HTML, CSS и API, для обоих веб-сайтов… developer.mozilla.org



Спасибо, что прочитали меня, и берегите себя!