缓存表单输入内容——本地临时储存

背景：页面数据展示过多，我们会添加分页和搜索来定位需要查看的数据，当页面切换后，搜索的关键字会被清空

解决方案：sessionStorage 关闭浏览器前均存储检索的关键字

1.存储方法：

　　sessionStorage.setItem('xxx', null)

  sessionStorage.setItem('xxx', JSON.stringify(data))

2.读取方法：

sessionStorage.getItem('xxx') ? JSON.parse(sessionStorage.getItem('xxx')) : null

说明：使用json字符串存储，是为了存储更多的数据（可以是一个对象），而在清空操作时，以及设置唯一的命名时需要注意避免重复

推荐：vue 的计算属性获取搜索的关键字，在初始化加载页面后进行判断赋值

    //初始化页面时：也可以在监听时触发
　　if (this.search_kwd_app) { // 有搜索历史
　　　　//赋值操作
    }
　　//计算属性
    search_kwd_app () { // 搜索值
      return sessionStorage.getItem('xxx') ? JSON.parse(sessionStorage.getItem('xxx')) : null
    },

补充：区分script逻辑中的对象与方法

1.使用对象的形式的有：

name: "",//命名空间
provide: ["inputParam"],//需要传入的私有参数，推荐value为函数
inject: ["inputParam"],//读取传入的私有参数
mixins: [],//混入一个完整的逻辑（请求-赋值-方法）
props: [],//组件传入属性，推荐value为对象
components: {}, //组件
computed: {}, //计算属性
methods: {}, //方法
watch: {//监听
 aaa: {

　　immediate: false,

　　handler (val) {

　　　　console.log(val)

　　},

},

2.使用函数形式输出的有：

provide() { //存入私有参数：推荐使用函数，data同理
    return {
        inputPrama: this
    }
},
data() { //数据：与inject、mixins、computed等的status不可重复定义
    return {};
},
created() { //初始化：一般获取或设置默认的值

},
mounted() { // 加载页面后：在组件封装时推荐使用，如js加载后、dow创建完成后的一系列操作

},
beforeDestroy() { //生命周期：页面注销前，即页面A——页面B切换时会触发
    // this.jsPlumbInstance.deleteEveryEndpoint()
}

 

转载于:https://www.cnblogs.com/wheatCatcher/p/11321265.html