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


Что такое веб-хранилище

Веб-хранилище HTML5 позволяет веб-страницам хранить данные на стороне клиента браузера.

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

Данные Web Storage хранятся только на стороне клиента, эти данные используются для отправки запросов на сторону сервера, но не хранятся на стороне сервера, это означает, что Web Storage не занимает пропускную способность сети и является более безопасным и быстрым.

Данные веб-хранилища хранятся в виде пары ключ/значение

Поддержка браузеров

Версия относится к первой версии браузера, поддерживающего Web Storage

Браузер Версия
Хром 4.0
Край 8.0
Firefox 3.5
Сафари 4.0
Опера 11.5

Сравнить

Сравните различия между веб-хранилищем и файлами cookie

Веб-хранилище Cookies
Размер хранилища
(поддержка браузерами различна)
5M 4K
Метод удаления Использование API Закройте браузер
или установить время истечения срока действия
Поддержка мероприятий Да Нет
Работа с JS-объект Строка
Точка доступа Клиент Клиент и сервер
Фактическое исполнение При отправке запроса передается только необходимая информация
и сервер не хранит свои данные
Проходит между двумя

Объекты

Существует два типа веб-хранилищ, localStorage и sessionStorage, которые отличаются жизненным циклом и диапазоном действия

  • localStorage

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

Ручное удаление: Очистка или удаление кэша браузера/ локального хранилища с помощью JavaScript

  • sessionStorage

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

Хранить, извлекать

Используйте методы getItem и setItem объекта Storage для чтения и хранения данных (объекты Storage ссылаются на localStorage или sessionStorage)

localStorage

// store
window.localStorage.setItem('site', 'https://dev.to/fakestandard');

// window 可以省略不寫
localStorage.setItem('site', 'https://dev.to/fakestandard')

// 也可以使用陣列索引和屬性的寫法
localStorage["site"] = 'https://dev.to/fakestandard';
localStorage.site= 'https://dev.to/fakestandard';

// retrieve
localStorage.getItem('site')
// or
localStorage.site
Войдите в полноэкранный режим Выход из полноэкранного режима

sessionStorage

// store
window.sessionStorage.setItem('site', 'https://dev.to/fakestandard');

// window 可以省略不寫
sessionStorage.setItem('site', 'https://dev.to/fakestandard')

// 也可以使用陣列索引和屬性的寫法
sessionStorage["site"] = 'https://dev.to/fakestandard';
sessionStorage.site= 'https://dev.to/fakestandard';

// retrieve
sessionStorage.getItem('site')
// or
sessionStorage.site
Войдите в полноэкранный режим Выход из полноэкранного режима

Удалить, очистить

Используйте один и тот же объект Storage для очистки данных, removeItem для удаления определенных данных и clear для очистки всех сохраненных данных.

localStorage

// remove
localStorage.removeItem('site')

// clear
localStorage.clear()
Войдите в полноэкранный режим Выход из полноэкранного режима

sessionStorage

// remove
sessionStorage.removeItem('site')

// clear
sessionStorage.clear()
Войдите в полноэкранный режим Выход из полноэкранного режима

Другой метод и имущество

В дополнение к вышеуказанным методам, также доступны свойства и методы length и key, length для просмотра количества данных, хранящихся в данный момент, и key для просмотра значения указанного индекса.

// localStorage
localStorage.length
localStorage.key(0)

// sessionStorage
sessionStorage.length
sessionStorage.key(0)
Войдите в полноэкранный режим Выход из полноэкранного режима

Хранить другой тип данных

Поскольку Web Storage предназначен для хранения строк, если вы хотите хранить нестроковый тип, вам придется изменить тип самостоятельно.

localStorage.count = Number(localStorage.count) + 1
sessionStorage.count = Number(sessionStorage.count) + 1
Войдите в полноэкранный режим Выход из полноэкранного режима

Храните данные в формате JSON

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

// store
let content = {
    'dev': 'https://dev.to/fakestandard',
    'github': 'https://github.com/FakeStandard'
}

localStorage.setItem('site', JSON.stringify(content))

// retrieve
let data = JSON.parse(localStorage.getItem('site'))
console.log(data)
Войдите в полноэкранный режим Выход из полноэкранного режима

Зайдите в Developer Tools и перейдите в Storage — Local Storage в теге Application Tag, чтобы увидеть веб-хранилище, которое вы только что сохранили.


И проверьте, поддерживает ли ваш браузер веб-хранилище, прежде чем использовать его.

// check browser support
if (typeof (Storage) !== 'undefined') {
    // do something..
} else {
    alert('Your browser does not support Web Storage.')
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Ссылка

HTML Web Storage API

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


Спасибо, что прочитали статью 🌷 🌻 🌼

Если вам понравилось, пожалуйста, не стесняйтесь нажать на кнопку сердечка ❤️
или следите за моим GitHub ⭐.
или купите мне кофе ⬇️ Я буду благодарен.


Оцените статью
devanswers.ru
Добавить комментарий