Как сохранить выбранный option у select при перезагрузке страницы?

Question

[Andy Koshman]

Всем добрый, я уже оставлял подобный вопрос временем ранее, но всё же. Backend возвращает массив вида:

[
 { text: 'male', value: 1 }, 
 { text: 'female', value: 2 }
];

text мне нужен как option в select, а value соответственно как value каждого option. В целом я так и вывожу, но не могу понять как мне сохранять text при перезагрузке страницы? Сохранять text как еще одно свойство в массиве personalDetails или есть какие то еще варианты?
вот код:
https://playcode.io/1701091

Answer 1

[Юрий Горбунов]

После перезагрузки страницы всё приложение на Vue обновится, соответственно вам необходимо постоянное временное хранение для состояния этого селекта и возможно других данных.

Самое простое без участия бэкэнда это можно организовать средствами браузера в localStorage. У него есть методы setItem и getItem куда вы можете сохранять строку. Это может быть значение конкретного селекта или объект с разными временными данными, которые необходимы для вашего приложения. Перед сохранением в localStorage не забудьте пропустить объект через JSON.stringify перед сохранением в localStorage, т.к. там можно хранить только строки.

Также при загрузке вашего кода на Vue вам нужно в onMounted вашего компонента прописать проверку если есть данные в localStorage то брать их и устанавливать селект в нужное положение. Если ранее вы сохраняли JSON строку, то необходимо после получения данных из localStorage их распарсить через JSON.parse

Comments

[Andy Koshman]

То есть по факту самый нормальном вариантом будет сохранять text в объект localStorage как еще одно свойство? У меня в проекте достаточно форм и таблиц и для каждого dropdown я использую один и тот же BaseSelect, я так понимаю что можно в компоненте, где бизнес логика с данными и запросы на сервер, реализовать сохранение text как еще одно свойство. Но я не могу понять как это реализовать, ведь я получаю массив с данными и мне по сути нужно сохранить весь массив в storage. Я нормально с select не работал, сложно понять принцип.

[Сергей delphinpro]

Andy Koshman, Если есть выбор пола, то он вероятно как-то участвует в бизнес логике. Значит эта информация должна сохраняться в базе данных. Значит сервер должен вам эту информацию предоставить

[
 { text: 'male', value: 1, selected: true }, 
 { text: 'female', value: 2, selected: false }
]

[Andy Koshman]

Сергей delphinpro, с сервера получаю в таком виде:

[
 { text: 'male', value: 1 }, 
 { text: 'female', value: 2 }
]

и по коду что скинул выше, присваиваю всё это дело в dom:

просто не могу сообразить как выбранный, условный male сохранить при перезагрузке. Понял что всё же нужно работать в компоненте бизнес логики а не в базовом шаблоне select.

[Сергей delphinpro]

Andy Koshman, не повторяйтесь. Я умею читать. Вы для чего делаете этот переключатель?

[Andy Koshman]

Сергей delphinpro, Не понял вопроса, пользователь должен выбрать пол из списка предложенных.