Как хранить данные из API в localStorage с VueJS
Моя практика простого SPA с VueJS требует, чтобы я слушал API и сохранял некоторые из его данных в localStorage браузера, однако я все еще не очень опытен с VueJS, поэтому я не знаю, как взять конкретные данные и сохранить его в LS, чтобы зарегистрированные пользователи могли видеть свою информацию позже.
API извлекает МНОГО информации, пока я хочу получить только адрес электронной почты и имя пользователя.
Это код на данный момент:
<script>
import axios from 'axios';
import jsonpAdapter from 'axios-jsonp';
export default {
data() {
return {
info: 'placeH',
data: []
}
},
mounted: function(){
axios({
url: 'APIplaceholder'
adapter: jsonpAdapter
}).then((res) => {
});
}
}
</script>
Моя проблема сейчас в том, что я не знаю, как выбрать только конкретную информацию (API возвращает много информации, но мне нужны только адрес электронной почты и имя), которую я хочу, а затем сохранить ее в localStorage.
Я думаю, что лучше всего было бы также сохранить его в файл JSON в LS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы получаете объект response со свойством data, который представляет запрошенный user следующим образом:
mounted: function(){
axios({
url: 'APIplaceholder'
adapter: jsonpAdapter
}).then((res) => {
localStorage["name"]=res.data.name
localStorage["email"]=res.data.email
});
}
localStorage хранит только строки. Это означает, что localStorage.setItem("apiData", res.data) сохранит строку "[Object object]" в localStorage, а не объект res.data.
Вы должны использовать JSON.stringify() и JSON.parse() для установки и получения элементов из localStorage.
.then((res) => {
localStorage.setItem("apiData", JSON.stringify(res.data));
});
вы можете получить их,
var data = JSON.parse(localStorage.getItem("apiData"));
тогда вы можете получить доступ к данным с помощью оператора (точка), например data.userName.
Надеюсь, это поможет.
Чтобы убедиться, правильно ли я понимаю: первый аргумент «apiData» - это то, что будет сохранено, а второй - res.data - это фактические данные, взятые из API? что означает, что res.data получит "[email protected]", а затем он будет передан и сохранен в "apiData"? Если да, то разве нет необходимости преобразовывать это в json?
да вы правы. localStorage хранит только строки. Я обновил свой ответ.
Затем сохраните его в локальном хранилище. Я предлагаю вам использовать async / await.