本地缓存

  1. wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB
  2. 使用localStorage永久存储
  3. 使用uniapp进行开发的时候，可以将wx替换为uni来进行缓存的操作

异步缓存

wx.setStorage(object)

uni.setStorage(object)

  • 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
1
2
3
4
wx.setStorage({
  key:"key",
  data:"value"
})

wx.getStorage(object)

uni.getStorage(object)

  • 从本地缓存中异步获取指定 key 对应的内容。
1
2
3
4
5
6
wx.getStorage({
  key: 'key',
  success: function(res) {
      console.log(res.data)
  }
})

wx.getStorageInfo(object)

uni.getStorageInfo(object)

  • 异步获取当前storage的相关信息
1
2
3
4
5
6
7
wx.getStorageInfo({
  success: function(res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})

wx.removeStorage(object)

uni.removeStorage(object)

  • 从本地缓存中异步移除指定 key 。
1
2
3
4
5
6
wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  }
})

同步缓存

wx.setStorageSync(key,value)

uni.setStorageSync(key,value)

  • 将 value 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

wx.getStorageSync(key)

uni.getStorageSync(key)

  • 从本地缓存中同步获取指定 key 对应的内容。

wx.getStorageInfoSync

uni.getStorageInfoSync

  • 同步获取当前storage的相关信息

wx.removeStorageSync(key)

uni.removeStorageSync(key)

  • 从本地缓存中同步移除指定 key 。

清理缓存

wx.clearStorage()

uni.clearStorage()

  • 清理本地数据缓存。

wx.clearStorageSync()

uni.clearStorageSync()

  • 同步清理本地数据缓存

同步缓存和异步缓存的区别

以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。

历史搜索

  • 案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" class="search-icon" placeholder="请输入要搜索的内容"  bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>
 
 
<view>
    <view>
        <text style="float:left;" bindtap="deleteHistory">历史搜索</text>
        <text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
    </view>
    <view>
        <view class="search-list" wx:for="{{searchData}}" wx:key="item">
            <view>{{item == null?'暂无数据':item}}</view>
        </view>
    </view>
</view>

页面

这里有三个绑定事件

  • bindinput=”searchNameInput” 获取用户输入的数据
  • bindtap=”setSearchStorage” 设置本地存储
  • bindtap=”deleteHistory” 删除历史搜索
1
2
3
4
5
6
7
//获取用户输入框的值
    searchNameInput:function(e){
        var that = this;
        that.setData({
            inputValue:e.detail.value
        })
    }

e.detail.value就代表了当前输入值

当点击搜索的时候，bindtap=”setSearchStorage”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
    var that = this
    if(this.data.inputValue != ''){
        //调用API向本地缓存存入数据
        var searchData = wx.getStorageSync('searchData') || [] 
        searchData.push(this.data.inputValue)  
        wx.setStorageSync('searchData', searchData)
 
        //读取用户搜索商品
        var name = this.data.inputValue
        wx.request({
          url: 'www.shop.com/home/product/search',
          data: {name:name},
          method: 'GET', 
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
    }
}

流程这么走：

  1. 用户输入数据，点击搜索

  2. 如果数据不为空，加入（设置）本地缓存

  3. 去服务器搜索用户想要的数据，赋值给这个页面的变量

  4. 点击删除，去除本地这个key的value

  • 这里的缓存形式的 key => value
1
var searchData = wx.getStorageSync('searchData') || []

获取本地名字为’searchData’的缓存，如果’searchData’这个缓存不存在就相当于重新什么一个空数组，赋值给searchData这个变量

1
searchData.push(this.data.inputValue)

将用户输入的值PUSH进searchData这个变量里

1
wx.setStorageSync('searchData', searchData)

调用API接口，重新设置key = ‘searchData’的这个缓存的value等于searchData，下面的wx.request是请求数据的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//从本地获取历史搜索数据
          var searchData = wx.getStorageSync('searchData')||[]
            this.setData({
                searchData:searchData
            })
 
 deleteHistory
 
//删除历史搜索数据
    deleteHistory:function(){
        var that = this
        wx.showModal({
        title: '提示',
        content: '是否删除历史搜索',
        success: function(res) {
            if (res.confirm) {
                wx.setStorageSync('searchData', []);
                wx.switchTab({
                    url: '/pages/index/index',
                })
             }
            }
        })
}