使用localStorage完成Vue项目中的历史搜索

在一些电商项目中，我们经常会看到记录历史搜索的功能，如下图所示。我们今天来使用localStorage结合Vue来完成这一功能。

1.首先第一步就是获取到搜索框的值，并存入localStorage里面

 <span @click="sousuo()">搜索</span>methods: {sousuo(){if(this.$refs.userinput.value == ""){return false}else{if(localStorage.history_input){var a = localStorage.history_input.split(',');a.push(this.$refs.userinput.value)localStorage.setItem('history_input',a.join(','))}else{localStorage.setItem('history_input',this.$refs.userinput.value)}}  },

我模拟了一下，在input框内输入值，并且存在localStorage中。

2.当localStorage存好之后我们在data中进行赋值就好了，因为会有点击删除隐藏的功能所以先给个bool状态。

data() {return {arr : localStorage.getItem('history_input').split(","),bool:true,}},

3.再使用v-for循环遍历出储存的值。

 <li class="histroyinput" v-for="(item,index) in arr" :key="index">{{item}}</li>

4.点击删除的话就是直接状态取反。

使用localStorage完成Vue项目中的历史搜索相关推荐

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
html引vue怎么实现国际化,Vue项目中Vue-i18n和element-ui国际化开发实现过程_唇印_前端开发者...
在开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如 ...
Vue 项目中实现的微信、微博、QQ空间分享功能（亲测有效）
需求:文章添加分享功能(包括微信.微博.QQ空间) 如下图所示: 点击图标分别跳转到如下界面:(实现效果如下) 话不多说直接代码(可以封装成组件) <template><div cl ...
vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，
vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航一.准备工作二.开发须知三.开始安装sdk 四.通过微信的config接口注入权限验证配置附上代码最近在搞vue项目需要在手 ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
问题：在vue项目中如何使用element-ui的照片墙功能？
遇到的问题: 在vue项目中如何使用element-ui的照片墙功能,限制只上传9张照片fileList?尤其是在编辑的情况下. 解决方法: <el-uploadaction="htt ...
百度地图路书(BMapLib.LuShu)------在vue项目中使用原生实现在线和离线地图
前几天vue项目中需要使用百度地图的路数功能制作历史轨迹,为了离线时也可以正常计算路程等,所以这里选择使用原生离线去实现路书这里放出百度的官方示例:地图JS API示例 | 百度地图开放平台我先用 ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...

使用localStorage完成Vue项目中的历史搜索

使用localStorage完成Vue项目中的历史搜索相关推荐

最新文章

热门文章