Как мне сохранить входной номер в localStorage, а затем загрузить его позже?

Question

Я пытаюсь создать программу, которая принимает входной номер, сохраняет его в localStorage одним нажатием кнопки, а затем загружает его при нажатии отдельной кнопки.По сути, функция сохранения / загрузки.Проблема в том, что мне нужно сохранить идентификатор из другой функции.

Я уже пытался вызвать другую функцию в своих функциях сохранения / загрузки и пробовал другие идеи, но я чрезвычайноплохо знаком с использованием localStorage (или любого другого хранилища).

Это функция с идентификатором, который я хочу сохранить (qty1), за которым следуют мои функции сохранения / загрузки (которые, похоже, не работают).

function modify_qty(val) {
    var qty = document.getElementById('qty1').value;
    var new_qty = parseInt(qty,10) + val;
    var max = document.getElementById('max1').value;

    if (new_qty < 0) {
        new_qty = 0;
    }
    if (isNaN(new_qty)) {
        new_qty = 0;
    }
    if (new_qty > max) {
        new_qty = max;
    }

    document.getElementById('qty1').value = new_qty;
    return new_qty;
}
function save() {
    return function(modify_qty) {
    localStorage.setItem('qty', qty1);
    }
}
function load() {
    return function(modify_qty) {
    var qty1 = localStorage.getItem('qty');

    document.getElementById('qty1').value = qty1;
    return qty1;
    }
}

Мне нужна функция сохранения, чтобы сохранить идентификатор "qty1" в локальном хранилище, чтобы функция загрузки могла потом вернуть его назад и заменить текущее значение сохраненным значением.Сейчас я не думаю, что какая-либо из функций сохранения / загрузки работает, поскольку я сохраняю значение, перезагружаюсь, пытаюсь загрузить, и ничего не происходит.В целях тестирования у меня отключена переменная max, так что это не так.

Answer 1

Заменить строку localStorage.setItem('qty', qty1); на:

localStorage.setItem('qty', JSON.stringify(qty1));

и строка localStorage.getItem('qty'); с:

JSON.parse(localStorage.getItem('qty'));

Это должно решить проблему.

Причина: localStorage сохраняет все как тип string. Поэтому любые целые числа или числа также конвертируются в string. Используя функции JSON, мы сохраняем исходное type значения, которое мы сохраняем в localStorage.

Answer 2

Я не вижу цели возвращения функции из функции в вашем коде, и я не вижу, как это относится к тексту вашего вопроса.

Я не вижу целиваше жестко закодированное использование get и set с localStorage.Если имя переменной не будет переменным, это усложнит чтение.

localStorage.setItem('qty',123); === localStorage.qty=123;

Упрощенная версия того, что я считаю, будет ...

<input type="number" id="value">
<input type="button" id="set" value="set">
<input type="button" id="restore" value="restore">

<script>
    document.getElementById('set').addEventListener("click", function() {
        localStorage.qty = document.getElementById('value').value;
        });

    document.getElementById('restore').addEventListener("click", function() {
        document.getElementById('value').value= localStorage.qty;
        });

    document.getElementById('value').addEventListener("change", function() {
        let max = 10;
        if (this.value < 0) {
            new_qty = 0;
        }
        if (this.value > max) {
            this.value = max;
        }
        });
</script>

Однако вы можетеиметь возможность проверки данных, выполненных для тега HTML, и не требовать проверки сценарием.

Answer 3

В дополнение к другим ответам вам необходимо проанализировать значения из входных данных в int, прежде чем вы сможете использовать их для сравнения в своей функции изменения, например: var qty = parseInt(document.getElementById('qty1').value);

Answer 4

Для функций save() и load() попробуйте следующее:

function save() {
  var qty1 = document.getElementById('qty1').value;
  localStorage.setItem('qty', qty1);
}

function load() {
  var qty1 = localStorage.getItem('qty');
  document.getElementById('qty1').value = qty1;
}

Answer 5

Мне неизвестен ваш HTML, но, похоже, вы слишком усложняете проблему.

Поправьте меня, если я ошибаюсь, но ваша цель - сохранить переменную в локальном хранилище при нажатии кнопки и загрузить ее при нажатии другой кнопки. Вы уже написали код, но я не уверен, почему вы возвращаете функцию при вызове load() или save().

<body>
  <span>qty1: </span>
  <input type="number" id="qty1"></input>
  <button onclick="load()">Load</button>
  <button onclick="save()">Save</button>
</body>

<script>
function save() {
  const qty1 = document.getElementById('qty1').value;
  localStorage.setItem('qty', qty1);
}

function load() {
  const qty1 = localStorage.getItem('qty');
  document.getElementById('qty1').value = qty1;
}
</script>

Вызов save() извлечет значение из элемента с идентификатором 'qty1' и сохранит его. Вызов load() захватит значение из localalstorage и установит для него элемент.

РЕДАКТИРОВАТЬ: Добавлен HTML, чтобы показать, как это должно работать

Answer 6

Вы использовали переменную qty1 внутри функции сохранения, которая не определена ни внутри функции сохранения, ни вне функции сохранения. qty1 переменная, используемая в качестве локальной переменной внутри функции загрузки