基于Vue sessionStorage实现保留搜索框搜索内容


Posted in Javascript onJune 01, 2020

最近遇到个需求:因为是后台管理系统,会频繁切换页面(路由),再次切换路由就重新加载页面了,重新输入条件很繁琐,需要保留搜索框的内容。(废话,看不同项目的不同需求吧)

保留搜索框内容:

利用sessionStorage来保存每次搜索框的内容。

后台管理系统的搜索栏除了筛选条件肯定还会有搜索按钮吧

基于Vue sessionStorage实现保留搜索框搜索内容

我的键名是根据我的页面路由名 + 'Stor'来取名的,这个拼接的'Stor'只是我个人用来区分此后缀的键名是存什么内容的,可按自己喜好来。

比如路由是carManage 键名就是carManageStor

因为不止一个页面要实现这个效果,在进入页面时要进行一次取值,拿浏览器存储中的数据:sessionStorage.getItem('键名')

为了好看,把获取的方法写到method里了,

getDefaultStor(routeName) {
  return sessionStorage.getItem(`${routeName}Stor`)
}

routeName参数的话看你自己的路由名啦,从this.$route里面拿。

清除缓存内容:

watch: {
  name(val) {
    if(!val) {
      sessionStorage.removeItem('键名') //键名的套路是一样的
    }   
  } 
}

还有一点是,如果当用户清除了输入框的内容,就把值清掉。

我的做法是通过监听输入框的name值来判断为空就清掉:

省事点的办法是直接监听name的变化,有值就sessionStorage.setItem(),没值就sessionStorage.removeItem()。

但是我感觉这样应该比较耗能,就没用这种偷懒的方式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 #Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 #Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 #Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 #Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 #Javascript
el-table树形表格表单验证(列表生成序号)
May 31 #Javascript
You might like
实用函数4
2007/11/08 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue-router传参用法详解
2019/01/19 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python中的默认参数实例分析
2018/01/29 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
世界读书日的活动方案
2014/08/20 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
教师业务学习材料
2014/12/16 职场文书
三峡导游词
2015/01/31 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python