vue 设置、获取缓存数据

最新推荐文章于 2026-05-03 06:47:03 发布

原创最新推荐文章于 2026-05-03 06:47:03 发布 · 3.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文将介绍在Vue中如何设置和获取缓存数据，包括使用Vuex进行状态管理，以及Vue内置的`beforeRouteLeave`钩子保存数据，利用`localStorage`或`sessionStorage`进行本地存储的方法。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

<template>



</template>

<script>


//监控自己定义的变量
        computed: {
          
            //获取表单缓存
            s_garden_id(){
                let s_garden_id = localStorage.getItem('s_garden_id') ? localStorage.getItem('s_garden_id') : '';
                return s_garden_id;
            },
            s_address(){
                let s_address = localStorage.getItem('s_address') ? localStorage.getItem('s_address') : '';
                return s_address;
            },
            s_company_name(){
                let s_company_name = localStorage.getItem('s_company_name') ? localStorage.getItem('s_company_name') : '';
                return s_company_name;
            },

            s_garden_price(){
                let s_garden_price = localStorage.getItem('s_garden_price') ? localStorage.getItem('s_garden_price') : '';
                return s_garden_price;
            },
            


        },
  methods: {

        // input改变时的操作
        handleSave(value) {
                // console.log('value',value);
                // console.log('111111',this.form.address);
            //设置缓存
            localStorage.setItem('s_garden_id', this.garden_id);
            localStorage.setItem('s_address', this.form.address);
            localStorage.setItem('s_address1', 's_address888');
            localStorage.setItem('s_company_name', this.form.company_name);
            localStorage.setItem('s_garden_price', this.form.garden_price);
                   
        },



      //其他地方使用，获取表单缓存数据
      lists.address = this.s_address
      lists.company_name = this.s_company_name;
      lists.arden_price = this.s_arden_price;
      lists.garden_house = this.s_garden_house;


 }
        
</script>