基于Vue sessionStorage实现保留搜索框搜索内容
更新时间：2020年06月01日 09:18:47 作者：jinfengJeff
这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
最近遇到个需求：因为是后台管理系统，会频繁切换页面（路由），再次切换路由就重新加载页面了，重新输入条件很繁琐，需要保留搜索框的内容。（废话，看不同项目的不同需求吧）
保留搜索框内容：
利用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()。
但是我感觉这样应该比较耗能，就没用这种偷懒的方式。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文给大家分享了vue实现简易翻页效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-11
这篇文章主要介绍了Vue-cli配置打包文件本地使用的教程图解,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
饿了么UI中el-tree树节点选中高亮的两种常用方式(highlight-current属性)
最近新做的项目有用到Element-UI tree组件,下面这篇文章主要给大家介绍了关于饿了么UI中el-tree树节点选中高亮的两种常用方式(highlight-current属性),文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
本篇文章主要介绍了Vue.nextTick 的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家介绍了VueJs中如何使用Teleport及组件嵌套层次结构详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
今天小编就为大家分享一篇关于实例讲解v-if和v-show的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
Vite中使用Ant Design Vue3.x框架教程示例
这篇文章主要为大家介绍了Vite中使用Ant Design Vue3.x框架教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了Vue的编码技巧与规范使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
今天小编就为大家分享一篇Vue-router 切换组件页面时进入进出动画方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了elementUI下拉框实现隐藏时触发相关事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论