Un article pour parler de l'utilisation des données de session dans Vue.js

Vue.js est un framework JavaScript populaire doté de nombreuses fonctionnalités, dont l'une consiste à gérer les données de session dans les applications Web. Vue.js fournit des options qui vous aident à gérer les connexions et déconnexions des utilisateurs et à enregistrer les sessions utilisateur entre différents itinéraires. Dans cet article, nous présenterons l'utilisation des données de session dans Vue.js.

1. Présentation des sessions dans Vue.js

Les sessions sont un mécanisme dans les applications Web qui permet de sauvegarder l'état et les données de l'utilisateur sur le serveur. Dans une application Vue.js, nous pouvons profiter de la fonctionnalité de stockage local du navigateur pour enregistrer les données de session sur l'ordinateur local de l'utilisateur. Ceci est généralement réalisé grâce à l'utilisation de cookies, sessionStorage et localStorage.

2. Utilisation des cookies

Un cookie est une donnée échangée entre un navigateur Web et un serveur Web. Les cookies dans Vue.js sont enregistrés sous forme de chaînes dans le stockage local du navigateur et envoyés au serveur à chaque requête HTTP. Vue.js fournit un plug-in appelé vue-cookies, qui peut nous aider à gérer les cookies.

Tout d'abord, nous devons installer vue-cookies :

npm install vue-cookies --save

Ensuite, nous pouvons importer et utiliser vue-cookies dans le fichier main.js de l'application Vue.js :

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

Dans le composant, nous pouvons utiliser les VueCookies object Pour définir, obtenir et supprimer des cookies :

export default {
  data () {
    return {
      cookieKey: 'my-cookie-key',
      cookieValue: 'my-cookie-value'
    }
  },
  methods: {
    setCookie () {
      this.$cookies.set(
        this.cookieKey,
        this.cookieValue
      )
    },
    getCookie () {
      this.$cookies.get(
        this.cookieKey
      )
    },
    deleteCookie () {
      this.$cookies.delete(
        this.cookieKey
      )
    }
  }
}

Dans le code ci-dessus, nous utilisons l'objet $cookies pour définir, obtenir et supprimer des cookies.

3. Utilisation de sessionStorage

sessionStorage est un mécanisme de stockage local fourni par le navigateur, qui nous permet de sauvegarder les données pendant la durée de la session en cours. Cela signifie que les données stockées seront supprimées lorsque l'utilisateur fermera l'onglet ou la fenêtre du navigateur. Dans une application Vue.js, nous pouvons utiliser le plugin vue-session pour gérer sessionStorage.

Tout d'abord, nous devons installer le plugin vue-session :

npm install vue-session --save

Ensuite, importez et utilisez vue-session dans le fichier main.js :

import VueSession from 'vue-session'
Vue.use(VueSession)

Dans le composant, nous pouvons utiliser l'objet $session pour définir, obtenir et supprimez les données de session :

export default {
  data () {
    return {
      sessionKey: 'my-session-key',
      sessionValue: 'my-session-value'
    }
  },
  methods: {
    setSession () {
      this.$session.set(
        this.sessionKey,
        this.sessionValue
      )
    },
    getSession () {
      this.$session.get(
        this.sessionKey
      )
    },
    deleteSession () {
      this.$session.delete(
        this.sessionKey
      )
    }
  }
}

Dans le code ci-dessus, nous utilisons l'objet $session pour définir, obtenir et supprimer les données de session.

4. Utilisation de localStorage

localStorage est un mécanisme de stockage local fourni par le navigateur, qui nous permet de sauvegarder des données dans le navigateur. Contrairement à sessionStorage, les données stockées dans localStorage persisteront même si l'utilisateur ferme l'onglet ou la fenêtre du navigateur. Dans les applications Vue.js, nous pouvons utiliser le plugin vue-localstorage pour gérer localStorage.

Tout d'abord, nous devons installer le plugin vue-localstorage :

npm install vue-localstorage --save

Ensuite, importez et utilisez vue-localstorage dans main.js :

import VueLocalStorage from 'vue-localstorage'
Vue.use(VueLocalStorage)

Dans le composant, nous pouvons utiliser l'objet $localStorage pour définir, obtenir et supprimer localStorage Data in :

export default {
  data () {
    return {
      localStorageKey: 'my-localstorage-key',
      localStorageValue: 'my-localstorage-value'
    }
  },
  methods: {
    setLocalStorage () {
      this.$localStorage.set(
        this.localStorageKey,
        this.localStorageValue
      )
    },
    getLocalStorage () {
      this.$localStorage.get(
        this.localStorageKey
      )
    },
    deleteLocalStorage () {
      this.$localStorage.remove(
        this.localStorageKey
      )
    }
  }
}

Dans le code ci-dessus, nous utilisons l'objet $localStorage pour définir, obtenir et supprimer des données dans localStorage.

Résumé :

Dans les applications Vue.js, nous pouvons utiliser des cookies, sessionStorage et localStorage pour gérer les données de session. Vue.js fournit de nombreux plugins pour nous aider à gérer ces données et fournit des API simples pour définir, obtenir et supprimer des données de session. Si vous devez gérer les connexions des utilisateurs, les cookies, OAuth, etc., ces outils vous seront d'une grande aide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!