基于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 相关文章推荐
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
微信小程序开发(一):服务器获取数据列表渲染操作示例
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 选项及相关信息函数库
2006/12/04 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python实现二维有序数组查找的方法
2016/04/27 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
幼儿园教研活动方案
2014/01/19 职场文书
和睦家庭事迹
2014/05/14 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python