JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input class="input" value="99.97" data-id="20" />
  
  <div class="container">
    Статус: <b><span class="result"></span></b>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js" async></script>
</body>
</html>

SASS

body
  font-family: Arial, sans-serif;

.input
  border: 1px solid #eee;
  height: 30px
  outline: none
  padding: 0 15px;
  transition: border-color .2s ease-out;
  
  &:focus
    border: 1px solid #000;

.container
  margin-top: 30px

JavaScript

// Библиотека для cookie — https://www.npmjs.com/package/js-cookie
// Для реализации debounce — http://underscorejs.org/

const setCookie = (name, value) => {
  Cookies.set(name, value, {
    expires: 1,
  });
};

const changeStatusText = (text) => {
  const result = document.querySelector('.result');
  result.innerHTML = text;
};

const onInputValue = (event) => {
  setCookie('input-value', event.target.value);
  changeStatusText('сохранено');
};

const onSaveValue = () => {
  const input = document.querySelector('.input');

  const value = Cookies.get('input-value');

  if (typeof value === 'string') {
    input.value = value;
    changeStatusText('значение взято из cookie');
  }

	input.addEventListener('input', () => {
	  changeStatusText('идет ввод значения');
  });

  input.addEventListener('input', _.debounce(onInputValue, 500));

  input.addEventListener('blur', (event) => {
    if (event.target.value !== value) {
      onInputValue(event);
    }
  });
};

onSaveValue();