前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 搜索历史记录缓存到本地

微信小程序 搜索历史记录缓存到本地

原创
作者头像
田超
发布2018-07-11 14:57:23
2.1K0
发布2018-07-11 14:57:23
举报
文章被收录于专栏:田超学前端田超学前端

ok,继续开工,记录一下

先说下需求,想做的效果是这样的:有个搜索框,下面是记录 搜索的关键字。由于小程序未采用登录注册,所以,搜索记录不方便保存在服务端,于是乎,前端需要记录到缓存里,然后显示出来。

上代码:

onload里获取的缓存记录到data的history里

代码语言:javascript
复制
//首先在onload里获取缓存历史搜索数据

  getHistory() {
 var that = this
    wx.getStorage({
      key: 'historys',
      success: function (res) {
        that.setData({
          history: res.data
        })
      },
    })
  },

代码语言:javascript
复制
//再在点击搜索的时候,把搜索关键字设置到缓存
var arr = []
var history = that.data.history
    
 if (history.length < 10){ //判断数组的长度
   history.unshift(e.detail.value) //把关键字插入数组
 //数组去重
 for (var i = 0; i < history.length; i++) {
 if (arr.indexOf(history[i]) == -1) {  //判断在arr数组中是否存在,不存在则unshift到arr数组中
            arr.unshift(history[i]);  //倒序排列
          }
        }
        wx.setStorage({
          key: "historys",
          data: arr
        })
      }

再从data里把history 拿到 合并到一起

收工。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档