Сохраненяем данные в браузере с JavaScript и localStorage

Сохраненяем данные в браузере с JavaScript и localStorage

Сохраненяем данные в браузере с 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.

Источник

Читайте также

НЕТ КОММЕНТАРИЕВ

Оставить комментарий