zoukankan      html  css  js  c++  java
  • 缓存表单输入内容——本地临时储存

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

    解决方案: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()
    }
  • 相关阅读:
    textare限制拖动;提示文字(点击消失,不输入恢复提示信息)
    JSON整理
    Bootstrap-模态框 modal.js
    input自动填入密码以后变成白色和黄色的解决办法
    Bootstrap-按钮篇btn
    jquery关于Select元素的操作
    数据库外键
    数据库一些操作
    爬虫日记-代理
    爬虫日记-模拟登录cookie操作
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/11321265.html
Copyright © 2011-2022 走看看