vue2.0和3.0不同的封装本地存储的写法

  • 本篇文章主要是简单的封装下本地存储的方法,在vue2.0中和vue3.0中有什么不同的写法
  • 页面的写法是一样的
    <p></p>
    <button @click="set_storage"><mark>点击存储数据</mark></button>
    <p></p>
    <button @click="get_storage"><mark>点击获取存储数据</mark></button><span>{{storage_message}}</span>
    <p></p>
    <button @click="remove_storage"><mark>点击删除存储数据</mark></button>
  • 在vue2.0中
   data(){
        return{
            storage_message:[]
        }
    },
    methods:{
        set_storage(){
            this.setStorage({//调用
                key:'storage',
                data:['1','2','3','4']
            })
        },
         get_storage(){
            this.getStorage({//调用
                key:'storage',
                success:res=>{
                    this.storage_message = res;
                }
            })
        },
         remove_storage(){
            this.removeStorage({//调用
                key:'storage',
                success:()=>{
                    this.storage_message = '我被删完啦!'
                }
            })
        },
        //设置本地存储
        setStorage({ key, data}){
            localStorage.setItem(key,JSON.stringify(data));
        },
        //获取本地存储
        getStorage({ key, success }){
            var data = localStorage.getItem(key);
            success( JSON.parse(data) );
        },
        //删除本地存储
        removeStorage({ key, success }){
            localStorage.removeItem(key);
            success();
        }
    }
  • 在vue3.0中(对vue3.0语法不是很熟悉的话,可以查看我的博客,里面有介绍过)
setup(){
          //声明变量
        const state = reactive({
            storage_message:[]
        })
        //当前的设置本地存储的方法,要return出去,否则页面的点击事件不触发
        const set_storage = ()=>{
            setStorage({
                key:'storage',
                data:['1','2','3','4']
            })
        }
         const get_storage=()=>{
            getStorage({
                key:'storage',
                success:res=>{
                    //在vue3.0中没有this的概念,reactive变量要这样写,ref的变量要加.value
                    state.storage_message = res;
                }
            })
        }
         const remove_storage=()=>{
            removeStorage({
                key:'storage',
                success:()=>{
                    state.storage_message = '我被删完啦!'
                }
            })
        }
        //这是在js中封装的方法,可以不用return出去
        const setStorage=({ key, data})=>{
            localStorage.setItem(key,JSON.stringify(data));
        }
        const getStorage= ({ key, success }) => {
            var data = localStorage.getItem(key);
            success( JSON.parse(data) );
        }
        const removeStorage = ({ key, success }) => {
            localStorage.removeItem(key);
            success();
        }
        return {
            ...toRefs(state),//变成响应式的
            set_storage,//将template中的方法return出去
            get_storage,
            remove_storage
        }
}

推荐阅读更多精彩内容