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

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

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

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

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

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

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

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

Сравнить

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

Объекты

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