美文网首页
微信小程序setStorage内容叠加不覆盖。

微信小程序setStorage内容叠加不覆盖。

作者: ChasenGao | 来源:发表于2018-07-13 20:22 被阅读1850次

还是不太适应小程序这种完全脱离DOM操作的开发方式,虽然用Vue的时候也是这种方式,但是还是会偶尔用个$()和append之类的感觉方便一些。

今天做一个项目,需求是通过localstorage的方式记录用户最近搜索的内容,用户打开搜索页后把这些内容显示在搜索栏的下方,当用户搜索新关键词时自动把新关键词添加到localstorage中。

而微信小程序提供的api wx.setStorage()和wx.setStorageSync()都会覆盖原内容,无法满足需求。

于是我想法如下:
1、data中新建一个数组arr,用于存储每次搜索的关键词。
2、页面onload之后先加载wx.getStorage() 方法,让页面显示最近搜索的内容。并把现有的缓存push到arr中,这样,arr就有了以前搜索过的关键词。
3、用户点击搜索按钮后,判断用户的关键词是否在arr中,如果在,则return null,不在则把新关键词push到arr中。
4、新关键词push之后,通过setStorageSync() 方法把包含 旧关键词和新关键词的数组arr存储到Storage中。
这样缓存就不会被覆盖了。代码如下:

/*js*/
data: {
    "arr2": []
  },
//页面onload后把已经存在的缓存push到数组arr2中
onLoad: function(options) {
    var that = this;
    wx.getStorage({
      key: 'recentSearch',
      success: function(res) {
        for (let i in res.data) {
          that.data.arr2.push(res.data[i])
        };
      }
    })
  },
searchSubmit(e){
    //这里的_val是获取input值的临时变量
    let _val
    
    //判断_val是否在数组中
    if (this.data.arr2.indexOf(_val) != -1) {
   //是 不做任何操作
      return null;
    } else {
    //否,把_val push到arr2中
      this.data.arr2.push(_val)
    };
  //把新的arr2存储到缓存中
    wx.setStorageSync('recentSearch', this.data.arr2);
    wx.getStorage({
      key: 'recentSearch',
      success: function(res) {
   //输出缓存内容
        console.log(res)
      }
    })
  }

效果如下:


123.gif

请忽略那条报错,那条错误和本文没有任何关系

相关文章

  • 微信小程序setStorage内容叠加不覆盖。

    还是不太适应小程序这种完全脱离DOM操作的开发方式,虽然用Vue的时候也是这种方式,但是还是会偶尔用个$()和ap...

  • 缓存问题之异步处理(微信小程序)

    微信小程序里面的本地缓存wx.setStorage(wx.setStorageSync)、wx.getStorag...

  • 小程序之缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、...

  • 小程序缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、...

  • 2018-04-16

    微信小程序开发笔记 全局变量存储 1、app.js 定义 global 2、应用wx.setStorage 样式进...

  • 微信小程序缓存-------缓存时效性

    在微信小程序中,数据缓存没有设置有效期的方法,只有本地缓存功能。 相应的api wx.setStorage(wx....

  • 微信小程序关于数据存储的一些坑

    微信小程序存储方式官方文档说得很清楚,同步和异步。保存数据有以下两种方式: wx.setStorage 异步保存 ...

  • 微信小程序整理

    Hi~ 我是微信小程序 小程序官方内容 微信小程序介绍 主要内容:微信小程序接入指南,客服功能使用指南,扫普通链接...

  • 微信小程序开发资源整理

    有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发 由于微信已经开发文档和开发工具了,所以下面的内容用处不...

  • 实战:微信小游戏与腾讯云

    本节的主要内容 微信小程序公众号 小程序公众号设置 腾讯云微信小游戏服务 小结 一、微信小程序公众号 微信公众号平...

网友评论

      本文标题:微信小程序setStorage内容叠加不覆盖。

      本文链接:https://www.haomeiwen.com/subject/jfvspftx.html