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

@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 не будет работать на стороне сервера при использовании серверного рендеринга.

@ciara 

Чтобы работать с localstorage в Nuxt.js, вы можете включить плагин vuex-persistedstate для сохранения состояния хранилища Vuex в localstorage.

1. Установите пакет vuex-persistedstate:

1

npm install vuex-persistedstate

1. Создайте файл плагина с настройками для vuex-persistedstate, например, plugins/localStorage.js:

1
2
3
4
5
6
7

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'your-key', // Название ключа для localstorage
  })(store)
}

1. Зарегистрируйте плагин в nuxt.config.js:

1
2
3
4
5

export default {
  plugins: [
    { src: '~/plugins/localStorage', mode: 'client' }
  ]
}

1. Теперь вы можете использовать объект $store в ваших компонентах для доступа к хранилищу Vuex, которое будет автоматически сохраняться в localstorage:

1

this.$store.commit('YOUR_MUTATION', payload)

1. Чтобы получить сохраненные данные из localstorage, вы также можете использовать объект $store:

1

const data = this.$store.state.yourState

1. Помните, что плагин vuex-persistedstate сохраняет только состояние хранилища Vuex в localstorage, поэтому если вам нужно сохранять данные без использования Vuex, вы можете применять примеры из предыдущего ответа.