Как работать с localstorage в nuxt.js?

Пользователь

от ciara , в категории: JavaScript , 6 месяцев назад

Как работать с localstorage в nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от christine , 6 месяцев назад

@ciara 

В Nuxt.js вы можете получить доступ к localstorage с помощью объекта $localStorage, который вы можете использовать во всех компонентах и страницах вашего приложения.


Чтобы сохранить данные в localstorage, вы можете использовать метод $localStorage.setItem(key, value), где key - это ключ для значения, которое вы хотите сохранить, а value - само значение.


Например, чтобы сохранить имя пользователя в localstorage, вы можете сделать следующее:

1
2
3
4
5
methods: {
  saveUser() {
    this.$localStorage.setItem('username', 'John');
  }
}


А чтобы получить сохраненное значение, вы можете использовать метод $localStorage.getItem(key), где key - это ключ, по которому вы хотите получить значение.

1
2
3
4
mounted() {
  const username = this.$localStorage.getItem('username');
  console.log(username); // John
}


Также вы можете удалить сохраненное значение с помощью метода $localStorage.removeItem(key) и очистить localstorage с помощью метода $localStorage.clear().

1
2
3
4
5
6
7
8
methods: {
  removeUser() {
    this.$localStorage.removeItem('username');
  },
  clearStorage() {
    this.$localStorage.clear();
  }
}


Важно отметить, что localstorage доступен только в браузере, поэтому функциональность localstorage не будет работать на стороне сервера при использовании серверного рендеринга.