【Vue】sessionStorage存取数据

一. 需求

1.1 模板

1. Vab Admin Pro

1.2 组件

1. ElementUI

1.3 阐述

列表页面���索【关键词】点击【查询】后，点击【查看】按钮跳转到【详情页】，详情页【返回】【保留原搜索关键词】

1. 原图

2. 搜索查询【关键词】

3. 详情

4. 返回后【保留】【搜索查询关键词】

二. 实现

1. 技术：sessionStorage
2. 代码

   template中代码【简略】，看主要事件即可

                                                                                  查询                                    清空                                                      // 剩下略export default{data(){return{listLoading: true,list:[],query: {          keyword: '',         },        pageForm: {          total: 0,          pageNo: 1,          pageSize: 10,        },}},created() {      //获取缓存中的keyword      this.query.keyword = sessionStorage.getItem('searchKeyword')      this.fetchData()    },    methods:{    /**    * 获取列表数据    **/    fetchData(){    this.listLoading = true        for (const key in this.query) {          if (!this.query[key]) delete this.query[key]        }        const {          data: { records, total },        } = await getDocumentList(          this.pageForm.pageNo,          this.pageForm.pageSize,          Object.assign({}, this.query)        )        this.list = records        this.pageForm.total = total        this.listLoading = false    },        /**    * 查询    **/    queryData() {        this.pageForm.pageNo = 1        //将搜索条件存到浏览器        sessionStorage.setItem('searchKeyword', this.query.keyword)        this.fetchData()      },      /**      * 清空搜索项      **/      clearData() {        this.query = {}        //删除缓存中的keyword        sessionStorage.setItem('searchKeyword', '')        this.fetchData()      },    }}