Create Global Function For Checking If LocalStorage is not empty - Vue.JS

Question

I'm just wondering how to create a global function wherein it checks whether the localStorage is not empty specifically if there's a token inside

What I've tried is creating a global variable in my main.js

Vue.$checkIfTokenIsNotEmpty = !!localStorage.getItem('token');
// this returns true or false

In my component,

<template>
    Is token Empty? {{ isTokenIsEmpty }} // I'm able to get true or false here
</template>

<script>
    export default {
        data(){
            return {
                 isTokenIsEmpty: this.$checkIfTokenIsNotEmpty
            }
        }    
    }
</script>

This works properly when I reload the page. The problem is, it's not reactive or real time. If I clear the localStorage, the value of my this.$checkIfTokenIsNotEmpty doesn't change. It only changes when I reload the page which is bad in my spa vue project.

score 0 · Answer 1 · answered Aug 14 '18 at 13:28

0

You can acces token like here: https://jsfiddle.net/djsj8dku/1/

  data: function() {
    return {
        world: 'world',
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }

Or you can use one of this packages: vue-reactive-storage, vue-local-storage

answered Aug 14 '18 at 13:28

Илья Зеленько

7,509
3
44
55

I don't get it. How does this code know if `localStorage` has a value globally? – jsonGPPD Aug 14 '18 at 14:05
localStorage is global object, you can access from the component. – Илья Зеленько Aug 14 '18 at 14:32
Yes I know but I want some global method that can return true or false if the localStorage is not empty. I'm trying to use vuex now but I'm having some error and I'm not sure what kind of flow should I create – jsonGPPD Aug 14 '18 at 14:52

Helping hand · Answer 2 · 2018-08-14T19:04:58.357

You cannot detect when localStorage is wiped out manually but you can watch when localStorage is updated. So watcher is what you need. Link

Regarding global function you can set a method & variable inside root component.

new Vue({
  el:"#app",
  data:{
     isTokenIsEmpty:null
  },
  methods: {
      checkIfTokenIsNotEmpty() {
         this.isTokenIsEmpty= !!localStorage.getItem('token');
      }
  }
})

Inside component,

mounted(){
  this.$root.checkIfTokenIsNotEmpty() //can be added anywhere when needed to check localStorage's Availablity
}

Html

<template> Is token Empty? {{ $root.isTokenIsEmpty }} // I'm able to get true or false here </template>

Create Global Function For Checking If LocalStorage is not empty - Vue.JS

2 Answers2