uniapp项目搜索框的本地存储以及带参跳转

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

上一篇文章中我们完成了搜索记录的数据追加以及搜索数据的存储以及读取，接下来将为大家介绍一下清空搜索记录的方法以及点击搜索之后携带参数跳转到搜索列表页。

• 我们点击搜索旁边的垃圾桶会弹出模态框提示我们是否要清空近期的搜索记录，具体的样式如下所示：

• 首先我们需要给这个垃圾桶绑定一个clearHistory方法，就是清空本地的历史搜索记录的意思，在这之前我们需要引入一个模态框，这里我们就使用uniapp原生自带的模态框uni.showMoadl，当用户点击确定执行成功的时候我们需要使用uni.removeStorage这个api方法，这个api的官方链接在：uniapp.dcloud.net.cn/api/storage… ，这个api的作用是从本地缓存中异步移除指定 key。清空历史搜索记录的方法的具体实现代码如下所示：

 clearHistory() {
      uni.showModal({
        title: "重要提示",
        content: "是否要清除搜索记录",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorage({
              key: "searchData",
            });
            this.searchData = [];
          }
        },
      });
    },

• 点击确定后searchData这个数组就为空了，然后页面上就展示为暂无搜索记录了，如下图所示：

• 点击搜索之后我们需要跳转到搜索的详情页去，然后需要携带搜索的关键词过去，this.searchword，这样点击跳转之后搜索详细的页面的搜索框里面也会有搜索的关键词，携带参数跳转页面的代码如下所示：

uni.navigateTo({
          url:
            "/pages/tabbar/tabbar-1/searchList?searchword=" +
            this.searchword +
            "",
        });