Vue 历史记录的本地存储清空历史记录

//Search-index.vue是父组件，引用Header.vue子组件
//Header.vue>
<div class="search-main"><i class="iconfont icon-Magnifier"></i><form action="" onsubmit="return false" @keyup.enter="goSearchList()"><inputtype="search"placeholder="搜索您喜欢的产品"v-model="searchVal"/></form>
</div>
<div class="search-btn" @click="goSearchList()">搜索</div>data() {return {//接收传来的值searchVal: this.$route.query.key || "",searchArr: [],};},
goBack() {this.$router.back();},
goSearchList() {//如果搜索为空白，那就跳出方法直接返回if (!this.searchVal) return;//判断之前有没有搜索的本地存储if (!localStorage.getItem("searchList")) {//没有,就设置数组，但是字符串类型localStorage.setItem("searchList", "[]");} else {//之前有存储，就获取this.searchArr = JSON.parse(localStorage.getItem("searchList"));}//不管之前有没有，都要给数组增加数据this.searchArr.unshift(this.searchVal);//ES6去重let newArr = new Set(this.searchArr);//给本地存储赋值，同样转换为字符串类型，同时把newAr从对象转换为数组localStorage.setItem("searchList", JSON.stringify(Array.from(newArr)));//路径如果没有变化，则退出，不跳转页面——如果搜索时input框的值和传递过来的值是一样的if (this.searchVal === this.$route.query.key) return;//跳转页面this.$router.push({name: "list",query: {//传递input框输入的内容key: this.searchVal,},});},

//Search-index.vue
<Header></Header>
<section><!-- 有搜索记录才展示，否则显示"暂无搜索记录"--><div class="search-history" v-if="searchArr.length"><h2><i class="iconfont icon-shijian"></i><span>历史搜索</span><span @click="deleteStorage">清空历史记录</span></h2><ul><li v-for="(item, index) in searchArr" :key="index">{{ item }}</li></ul></div><div v-else>暂无搜索记录...</div>
</section>import { MessageBox } from "mint-ui";
data() {return {searchArr: [],};},
created() {this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];}
methods: {deleteStorage() {MessageBox({title: "提示",message: "确定执行此操作?",showCancelButton: true,}).then((res) => {if (res == "confirm") {//删除本地存储localStorage.removeItem("searchList");//渲染层的数组数据清空this.searchArr = [];}});},},

Vue 历史记录的本地存储清空历史记录相关推荐

本地存储搜索历史记录工具类
本地存储搜索历史记录因为需要用到存储本地搜索,所以就提前写一下工具,简单说下分为3部分: 添加搜索记录获取搜索历史记录清空搜索记录基本就是这么回事,代码实现也很简单, #define Reco ...
vue 前端本地存储搜索历史记录，删除某条记录，清空记录
vue 前端本地保存搜索历史,localStorage 一.保存历史的数组是由元素组成: [ "000004 SZ"] 在页面第一次加载的时候,从localStorage中获取历史 ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
vue项目storage本地存储
1.在model文件夹下面新建一个storage.js const storage = {set(key,value){sessionStorage.setItem(key,JSON.stringif ...
APIS（BOM）——Window对象、本地存储
Window对象 BOM Window对象定时器-延时函数 js执行机制同步任务异步任务执行机制 location对象 navigator 对象 histroy 对象本地存储本地存储分类 ...
iOS-关于浏览、搜索等历史记录本地存储的思路
前言工具类VisitManager结构一.Node: 二. VisitManager VisitManager数据操作流程一.插入数据二. 删除链表中的Node 1. 删除链表中的NodeB ...
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
数据更新渲染,axios请求数据,配置环境一.路由跳转 app.vue <template><div id="app"><keep-alive> ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
react native 使用AsyncStorage 存储搜索历史记录
React Native 版本执行0.57的规则公共方法 /** * key-value 存储* App用到的所有存储 key 名字在此处列出并注明例如: userInfo 用户信息* searc ...

Vue 历史记录的本地存储清空历史记录

Vue 历史记录的本地存储清空历史记录相关推荐

最新文章

热门文章

Vue 历史记录的本地存储 清空历史记录

Vue 历史记录的本地存储 清空历史记录相关推荐

最新文章

热门文章

Vue 历史记录的本地存储清空历史记录

Vue 历史记录的本地存储清空历史记录相关推荐