做微信小程序列表时遇到搜索,要把搜索的记录存到本地
利用 以下方式来存取
wx.setStorageSync(string key, any data) :string key本地缓存中指定的 key , any data是key对应的需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify
序列化的对象
wx.getStorageSync(string key) : string key本地缓存中指定的 key 返回值any data 就是key对应的内容
具体详见微信小程序api
wx.setStorageSync(string key, any data) | 微信开放文档
any wx.getStorageSync(string key) | 微信开放文档
首先先定义一个存历史记录的变量
data: {
historyDatas:'',//历史搜索
}
当页面加载时 先查询是否有搜索历史 cityHistoryKey就相当于key
这里 先判断是否有这个key,如果有,就把对应的内容先给history 如果没有 就先给存个空,最后个把这个值赋给历史记录的变量
onLoad: function (options) {
var cityHistoryKey = 'cityHistory' + this.data.cityid // 这里cityid是城市值,我这里要分不同城市的历史记录
var history = ''
if(wx.getStorageSync(cityHistoryKey)){
history = wx.getStorageSync(cityHistoryKey)
}else{
history = ''
wx.setStorageSync(cityHistoryKey, [])
}
console.log('cityHistoryKey---',cityHistoryKey)
this.setData({
historyDatas:history,
})
console.log('搜索历史记录--',this.data.historyDatas)
}
定义一个添加历史记录的方法
addHistory(obj){//添加历史记录
var historyname = 'cityHistory' + this.data.cityid //先定好key的名字historyname
var historydata = wx.getStorageSync(historyname) //和onload里一样取key
//查看是否是重复搜索记录
var historydataStr = JSON.stringify(historydata)
console.log('historydata---',historydata)
if(historydataStr.indexOf(obj.name) == -1){//通过name字段判断是否重复
if(historydata.length < 10){ //只能存10条
historydata.push(obj)
}else{//删掉多余10条的
historydata.shift()
historydata.push(obj)
}
wx.setStorageSync(historyname, historydata)//存到缓存中 historydata就是存的内容
this.setData({ // 把历史记录赋给事先定义好的变量就可以了
historyDatas:historydata.reverse() //reverse() 起到倒序的作用,如果不加这个最新添加的历史记录在下面,所以我给前后顺序颠倒了一下
//historyDatas:historydata
})
}
}
引用添加记录 比如点击热门榜单的时候 添加对应的记录
比如点击 公园十七区, 首先要先获取 ‘公园十七区’ 的对应信息,这里 获取到 name:公园十七区 , id:1,
<view
wx:for="{{hotkeywords}}"
wx:key="index"
bindtap="hotkeywordsclick"
data-name="{{item.estatename}}"
data-id="{{item.estateid}}">{{item.estatename}}<view>
hotkeywordsclick:function(e){//点击热门榜单
var id = e.currentTarget.dataset.id;//获取id
var name = e.currentTarget.dataset.name //获取name
//保存历史搜索数据
var historyObj = {
id:id,
name:name,
}
this.addHistory(historyObj) //调用存的方法,把值传进去
}