JavaScript — это универсальный язык программирования, который широко используется для создания веб-приложений. Одной из ключевых особенностей JavaScript является его способность хранить и извлекать данные на стороне клиента. В этом сообщении блога мы обсудим различные системы хранения, доступные в JavaScript, и способы их использования.
- Локальное хранилище
Локальное хранилище — это система хранения «ключ-значение», позволяющая хранить данные на стороне клиента. Данные, хранящиеся в локальном хранилище, доступны только создавшему их источнику и хранятся в браузере до тех пор, пока не будут явно очищены. Вы можете использовать объект localStorage для хранения и извлечения данных в локальном хранилище.
ex:
localStorage.setItem('имя пользователя', 'Джон Доу');
console.log(localStorage.getItem('имя пользователя')); // 'Джон Доу'
2. Хранилище сеансов
Хранилище сеанса похоже на локальное хранилище, но данные, хранящиеся в хранилище сеанса, удаляются при закрытии вкладки или окна браузера. Вы можете использовать объект sessionStorage для хранения и извлечения данных в хранилище сеансов.
ex :
sessionStorage.setItem('cart', '{ "item1": 2, "item2": 3 }');
console.log(sessionStorage.getItem('cart')); // ‘{ «элемент1»: 2, «элемент2»: 3 }’
3.Файлы cookie
Файлы cookie — это небольшие текстовые файлы, которые хранятся на стороне клиента и отправляются на сервер с каждым запросом. Файлы cookie обычно используются для хранения информации о сеансе, такой как токены аутентификации. Вы можете использовать свойство document.cookie для хранения и извлечения данных в файлах cookie.
ex :
document.cookie = “username=John Doe; expires=Чт, 18 декабря 2021 г., 12:00:00 UTC; path=/”;
console.log(document.cookie); // 'username=Джон Доу'
4.Индексированная БД
IndexedDB — это система транзакционных баз данных, встроенная в браузер. Он позволяет хранить и извлекать структурированные данные и поддерживает расширенные функции, такие как индексы и транзакции. Вы можете использовать объект indexedDB для взаимодействия с IndexedDB.
ex :
let request = indexedDB.open("MyDatabase", 1);
request.onupgradeneeded = function() {
let db = request.result;
let store = db.createObjectStore("users", { keyPath: "username" });
};
request.onsuccess = function() {
let db = request.result;
let tx = db.transaction("users", "readwrite");
let store = tx .objectStore («пользователи»); «Пользователь добавлен»);
};
};
заключение
В заключение, JavaScript предлагает несколько систем хранения для хранения данных на стороне клиента. Каждая система хранения имеет свои преимущества и варианты использования, и вам следует выбрать ту, которая наилучшим образом соответствует вашим потребностям.
