Локальное хранилище — это полезный инструмент веб-разработки, который позволяет разработчикам сохранять данные в браузере пользователя. В этой статье мы рассмотрим различные особенности локального хранилища, начиная с примеров начального уровня и заканчивая более сложными методами. К концу этого руководства вы получите базовое представление о том, как успешно использовать локальное хранилище в веб-приложениях.

Примеры для начального уровня в локальном хранилище

1. Сохранение настроек пользователя:

    
    
    



    Choose a theme:
    
        Light
        Dark
        Medium
    
    Save Preference

    

Когда пользователь выбирает тему и нажимает кнопку «Сохранить настройки», этот код записывает тему на консоль. Чтобы прочитать этот журнал, откройте инструменты разработчика браузера (обычно нажав F12 или щелкнув правой кнопкой мыши страницу и выбрав «Проверить») и перейдите на вкладку консоли. (Подробнее)

2. Запоминание пользовательского ввода:

    
    
    



    
    Save Input

    

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

Когда пользователь вводит текст в поле ввода и нажимает кнопку «Сохранить ввод», текст сохраняется в локальном хранилище браузера. Это означает, что даже если пользователи обновят веб-сайт или закроют и снова откроют браузер, сохраненные данные останутся доступными. Журнал консоли и оповещение уведомляют пользователя об успешном сохранении введенных данных. (Читать далее)

3. Постоянство корзины покупок :

    
    
    



    
Shopping Cart
    

В этом примере показано, как сохранить корзину покупок, используя локальное хранилище. Товары, добавленные в корзину, сохраняются в виде массива в локальном хранилище под ключом «корзина». Когда страница загружается, сохраненные элементы корзины извлекаются из локального хранилища и отображаются.

Когда вы нажимаете одну из кнопок «Добавить товар X в корзину», соответствующий товар добавляется в корзину, а обновленное содержимое корзины отображается в консоли. Чтобы просмотреть эти журналы, откройте инструменты разработчика браузера (обычно нажав F12 или щелкнув правой кнопкой мыши страницу и выбрав «Проверить») и перейдите на вкладку консоли.

Вы также можете просмотреть локальное хранилище непосредственно с помощью инструментов разработчика браузера. Большинство браузеров позволяют вам сделать это, щелкнув правой кнопкой мыши на странице, выбрав «Проверить», чтобы получить инструменты разработчика, а затем перейдя на вкладку «Приложение» или «Хранилище». Оттуда разверните раздел «Локальное хранилище», чтобы просмотреть пары ключ-значение веб-сайта. В этом примере ключ «корзина» включает строку JSON, представляющую сохраненные элементы корзины.
Прочитать статью полностью — Освоение локального хранилища в веб-разработке: 8 практических примеров, от новичка до эксперта!

Изучите Json — нажмите здесь