vue 利用 localStorage 本地存储实现搜索历史记录

最新推荐文章于 2024-06-12 07:45:57 发布

置顶狮仔

最新推荐文章于 2024-06-12 07:45:57 发布

阅读量1.5k

点赞数 2

分类专栏： vue本地存储数据文章标签： vue

本文链接：https://blog.csdn.net/weixin_43355787/article/details/116201685

版权

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js结合localStorage在Web应用中实现搜索历史记录功能。通过监听输入框的回车事件，将搜索值转化为JSON存储在本地。在组件挂载后，检查localStorage是否有数据，并将其渲染到页面上。同时，确保输入已存在历史记录或空字符时不会重复添加到历史记录中。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

输入框回车事件以及搜索的事件
在这里插入图片描述

在这里插入图片描述

data中写入
在这里插入图片描述
在methods中写入search事件

（1）在事件中判断输入的值，存储的数组为字符串数组，需要JSON方法转化
（2）事件中数组存储成功后，在mounted生命周中调用，必须判断本地存储是否有数据，然后再由data中的数据赋值本地存储的数据，进行循环渲染
（3）在input中输入已有的历史记录或者空字符不会再新增存储到数组中

在这里插入图片描述

关注