基于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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
jquery等待效果示例
May 01 Javascript
javascript实现tab切换特效
Nov 12 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
微信小程序开发(一):服务器获取数据列表渲染操作示例
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
php.ini中文版
2006/10/09 PHP
GD输出汉字的函数的分析
2006/10/09 PHP
聊天室php&mysql(四)
2006/10/09 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
js 一个关于图片onload加载的事
2013/11/10 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
python3.4实现邮件发送功能
2018/05/28 Python
python tkinter界面居中显示的方法
2018/10/11 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
盗窃案辩护词
2015/05/21 职场文书
运动会加油稿30字
2015/07/21 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript