微信小程序结合Storage实现搜索历史效果-创新互联

本文实例为大家分享了微信小程序实现搜索历史效果的具体代码，供大家参考，具体内容如下

成都创新互联服务项目包括和平网站建设、和平网站制作、和平网页制作以及和平网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，和平网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到和平省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

实现目标

代码实现

集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。

<!-- wxml -->
<view class="search-box">
 <view class='icon'>
  <image src='../../assets/search.png' mode='widthFix'></image>
  <!-- 使用bindinput属性绑定getSearchKey函数获取input组件中的值-->
  <!-- 使用bindblur属性绑定routeToSearchResPage函数处理input失去焦点事件-->
  <input placeholder='搜索你想购买的商品' bindinput='getSearchKey' bindblur='routeToSearchResPage'></input>
 </view>
 <text>取消</text>
</view>
<view class='options'>
 <text>历史搜索记录</text>
 <text bindtap='clearHistory'>清空</text>
</view>
<view class='options'>
<!-- 遍历 history 数组 -->
 <text class='item' wx:for='{{history}}' data-index='{{index}}' bindtap='routeToSearchResPage'>{{item}}</text>
</view>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。