Что такое веб-хранилище
Веб-хранилище 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 ⭐.
или купите мне кофе ⬇️ Я буду благодарен.