Ошибка при получении структуры для получения результата [VueJs]

Question

Я сохраняю необходимую информацию, полученную из HTTP-запроса, в структуру и пытаюсь сохранить ее в локальном хранилище, но когда я пытаюсь получить элемент локального хранилища и вывести одно значение внутри структуры, это не работает !

Мой код следующий:

//The response result I got from Http request.
.then(function(response) {

    //Save the needed UserInformation into struct.
    let CurrentUser = {
       username: response.data.result.User.username,
       name: response.data.result.User.name,
       token: response.data.result.token,
       id: response.data.result.User.id,
     }

    //Save the user information into the local storage.
    localStorage.setItem("CurrentUser", JSON.stringify(CurrentUser));
    var Curr_user = localStorage.getItem("CurrentUser");
    console.log(Curr_user);
    console.log("the name of the current user: " + Curr_user['name']);

})

Результат я получил следующим образом:

{"username":"Myusername","name":"Myname","token":"XXXXXX","id":"YYYYYY"}
the name of the current user: undefined

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

Answer 1

localStorage сохраняет все в виде строки, поэтому вам нужно проанализировать эту строку JSON, прежде чем обрабатывать ее как объект.

Эта строка:

localStorage.setItem("CurrentUser", JSON.stringify(CurrentUser));
var Curr_user = JSON.parse(localStorage.getItem("CurrentUser"));