Vue encapsulates localStorage access and deletion

Encapsulate localStorage in storage.js

// 封装本地存储的方法
var storage = {
    
    
  $setStroage(key, value) {
    
    
    //对象必须序列化才能存入缓存
    localStorage.setItem(key, JSON.stringify(value));
  },
  $getStroage(key) {
    
    
    //反序列化
    return JSON.parse(localStorage.getItem(key));
  },
  $removeStroage(key) {
    
    
    localStorage.removeItem(key);
  },
};
export default storage;

main.js import

import storage from '@/utils/storage.js';
Vue.prototype.$storage= storage

page use

<template>
  <div>
    111
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    

    }
  },
  created() {
    
    
    this.$storage.$setStroage("name","zs") // 存

    this.$storage.$getStroage('name') // 取

    this.$storage.$removeStroage('name') // 删
  },
}
</script>