微信小程序————搜索框获取本地缓存搜索记录

歌齽雪默萧

于 2021-10-27 12:01:38 发布

阅读量776

点赞数 1

分类专栏：微信小程序文章标签：微信小程序缓存小程序

本文链接：https://blog.youkuaiyun.com/CFMxuexue/article/details/120990185

版权

本文详细介绍了微信小程序如何实现获取并展示本地缓存的搜索记录，包括HTML结构、CSS样式以及核心的JavaScript操作。通过JavaScript部分，重点阐述了如何读取和处理本地存储的历史搜索数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序获取本地缓存的搜索记录

html

<!--index.wxml-->
//这里是搜索框
<view class="box_search">
    <image src="/images/ic_search.png" class="ic_search"></image>
    <input type="text" value="{
  {keywords}}" bindinput="get_keyword" placeholder="搜索店铺名或商品名" bindconfirm="getInputValue" placeholderStyle="color: #999" data-input="values" bindblur="get_search"></input>
    <image src="/images/ic_close.png" class="ic_clear" wx:if="{
  {keywords}}" bindtap="toClear"></image>
</view>


//这里显示搜索记录

<block wx:else >
  <view class="hotbox">
    <view class="text">搜索历史:</view>
    <view class="oldsearch">
    <view   wx:for="{
  { history }}" wx:key="*this">
      <!-- <navigator class="label" url="/store/search_store?inputValue={
  { item }}" >{
  {item}}</navigator> -->
      <view class="label" data-value="{
  {item}}" bindtap="get_oldsearch" >{
  {item}}</view>
    </view> 
     </view>
  </view>  
  <view class="clear" bindtap="clearHis">清除搜索历史