还是不太适应小程序这种完全脱离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
请忽略那条报错，那条错误和本文没有任何关系
