JSFiddle - React, Tailwind, and code Playground

HTML

Локальное хранилище:
<br>
<input id="apolocal" type="text" placeholder="Введите текст"> <input id="apolocalok" type="button" value="ОК">

<br>
<br>
<br>
Сессионное хранилище:
<br>
<input id="aposession" type="text" placeholder="Введите текст"> <input id="aposessionok" type="button" value="ОК">

JavaScript

$(function() {
  var apolfield = $('#apolocal'), aposfield = $('#aposession');
  var apolbutton = $('#apolocalok'), aposbutton = $('#aposessionok');
  
  if(localStorage.getItem('apolocalstore')) {
    // Проверяем, есть ли запись с именем apolocalstore в локальном хранилище
    apolfield.val(localStorage.getItem('apolocalstore'));
  };
  if(localStorage.getItem('aposessionstore')) {
    // Проверяем, есть ли запись с именем apolocalstore в сессионном хранилище
    aposfield.val(localStorage.getItem('aposessionstore'));
  };
  apolbutton.click(function() {
    if(apolfield.val() != '') {
      // При клике по кнопке ОК у поля локального хранилища записываем значение поля в локальное хранилище
      localStorage.setItem('apolocalstore', apolfield.val());
      alert('Данные успешно сохранены!');
    } else {
      alert('Поле пустое');
    }
  });
  
  aposbutton.click(function() {
    if(aposfield.val() != '') {
      // При клике по кнопке ОК у поля локального хранилища записываем значение поля в локальное хранилище
      localStorage.setItem('aposessionstore', aposfield.val());
      alert('Данные успешно сохранены!');
    } else {
      alert('Поле пустое');
    }
  });
});