还是不太适应小程序这种完全脱离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

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