Сохраненяем данные в браузере с JavaScript и localStorage
Здравствуйте! В сегодняшней статье мы рассмотрим, как можно хранить данные на стороне клиента, без необходимости
обращаться к серверу сайта.
Итак, обычно для размещения приложения требуется поставщик облачных услуг и база данных. Но иногда нам нужно что-то сделать в HTML без добавления базы данных. В этом случае мы используем JavaScript для доступа к localStorage браузера.
Что такое localStorage в JavaScript
localStorage в JavaScript позволяет веб-приложениям хранить данные локально в браузере пользователя – без срока действия. Данные не удаляются при закрытии браузера и доступны при повторном открытии.
Также позволяет вашим клиентам быстро получать доступ к определенным данным без использования базы данных.
Как использовать методы localStorage в JavaScript
Существует четыре основных метода localStorage JavaScript, которые вы можете использовать для доступа к localStorage и работы с ним:
setItem() — принимает пару ключ-значение и добавляет ее в localStorage.
getItem() — принимает ключ и возвращает соответствующее значение
RemoveItem() — берет ключ и удаляет соответствующую пару ключ-значение.
clear() — очищает localStorage (для домена)
Откройте браузер, а затем получите доступ к консоли. Например, в Google Chrome откройте «Инструменты разработчика» и перейдите на вкладку Консоль .
Введем команду localStorage , и увидим текущие данные. Например (предполагая, что он изначально пуст):
localStorage
Storage {length: 0}
// сохранение элемента
localStorage.setItem("myKey", "testValue");
localStorage
Storage {myKey: "testValue", length: 1}
// получаем сохраненное значение
localStorage.getItem("myKey");
// очистка хранилища
localStorage.clear();
Пример localStorage JavaScript
В следующем примере показано, как можно хранить информацию из текстовой области в localStorage:
Создайте простой файл index.html с одной текстовой областью и тремя кнопками, как показано ниже. Идентификатор текстовой области может быть любым — в этом примере мы назвали его myTextArea.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>JavaScript localStorage demo</h1>
<textarea id="myTextarea" rows="10" cols="80"></textarea>
<p></p>
<button onclick="mySave()">Save</button>
<button onclick="myLoad()">Load</button>
<button onclick="myClear()">Clear</button>
<script>
function mySave() {
var myContent = document.getElementById("myTextarea").value;
localStorage.setItem("myContent", myContent);
}
function myLoad() {
var myContent = localStorage.getItem("myContent");
document.getElementById("myTextarea").value = myContent;
}
function myClear() {
localStorage.clear();
}
</script>
</body>
</html>
Таким образом, достаточно просто сохранить данные на стороне клиента при помощи javascript и браузерного хранилища localStorage.
