Artikel untuk bercakap tentang penggunaan data sesi dalam Vue.js

Vue.js ialah rangka kerja JavaScript popular yang mempunyai banyak ciri, salah satunya ialah mengendalikan data sesi dalam aplikasi web. Vue.js menyediakan pilihan yang membantu anda mengurus log masuk dan log keluar pengguna serta menyimpan sesi pengguna antara laluan yang berbeza. Dalam artikel ini, kami akan memperkenalkan penggunaan data sesi dalam Vue.js.

1. Gambaran Keseluruhan Sesi dalam Vue.js

Sesi ialah mekanisme dalam aplikasi web yang membantu menyelamatkan keadaan dan data pengguna pada pelayan. Dalam aplikasi Vue.js, kami boleh memanfaatkan ciri storan setempat penyemak imbas untuk menyimpan data sesi ke komputer setempat pengguna. Ini biasanya dicapai melalui penggunaan kuki, sessionStorage dan localStorage.

2. Menggunakan Kuki

Kuki ialah data yang ditukar antara penyemak imbas web dan pelayan web. Kuki dalam Vue.js disimpan sebagai rentetan dalam storan setempat penyemak imbas dan dihantar ke pelayan pada setiap permintaan HTTP. Vue.js menyediakan pemalam yang dipanggil vue-cookies, yang boleh membantu kami mengendalikan kuki.

Pertama, kita perlu memasang vue-cookies:

npm install vue-cookies --save

Seterusnya, kita boleh mengimport dan menggunakan vue-cookies dalam fail main.js aplikasi Vue.js:

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

Dalam komponen, kita boleh menggunakan objek VueCookies untuk menetapkan, mendapatkan dan memadam kuki:

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
      )
    }
  }
}

Dalam kod di atas, kami menggunakan objek $cookies untuk menetapkan, mendapatkan dan padam kuki.

3. Menggunakan sessionStorage

sessionStorage ialah mekanisme storan setempat yang disediakan oleh penyemak imbas, yang membolehkan kami menyimpan data pada tempoh sesi semasa. Ini bermakna data yang disimpan akan dipadamkan apabila pengguna menutup tab penyemak imbas atau tetingkap penyemak imbas. Dalam aplikasi Vue.js, kami boleh menggunakan pemalam vue-session untuk mengendalikan sessionStorage.

Pertama, kita perlu memasang pemalam vue-session:

npm install vue-session --save

Seterusnya, import dan gunakan vue-session dalam fail main.js:

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

Dalam komponen, kita boleh menggunakan objek $session untuk menetapkan, mendapatkan dan memadam data sesi:

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
      )
    }
  }
}

Dalam kod di atas, kami menggunakan objek $session untuk menetapkan, mendapatkan dan memadam sesi data.

4. Menggunakan localStorage

localStorage ialah mekanisme storan setempat yang disediakan oleh penyemak imbas, yang membolehkan kami menyimpan data ke penyemak imbas. Tidak seperti sessionStorage, data yang disimpan dalam localStorage akan berterusan walaupun pengguna menutup tab penyemak imbas atau tetingkap penyemak imbas. Dalam aplikasi Vue.js, kami boleh menggunakan pemalam vue-localstorage untuk mengendalikan localStorage.

Pertama, kita perlu memasang pemalam vue-localstorage:

npm install vue-localstorage --save

Seterusnya, import dan gunakan vue-localstorage dalam main.js:

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

Dalam Dalam komponen, kita boleh menggunakan objek $localStorage untuk menetapkan, mendapatkan dan memadam data dalam localStorage:

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
      )
    }
  }
}

Dalam kod di atas, kami menggunakan objek $localStorage untuk menetapkan, mendapatkan dan memadam data dalam localStorage .

Ringkasan:

Dalam aplikasi Vue.js, kami boleh menggunakan kuki, sessionStorage dan localStorage untuk mengendalikan data sesi. Vue.js menyediakan banyak pemalam untuk membantu kami mengendalikan data ini dan menyediakan API mudah untuk menetapkan, mendapatkan dan memadam data sesi. Jika anda perlu mengendalikan log masuk pengguna, kuki, OAuth, dsb., alatan ini akan membantu anda.

Atas ialah kandungan terperinci Artikel untuk bercakap tentang penggunaan data sesi dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!