WeChat 애플릿의 캐시 분석

이 글에서는 주로 WeChat 미니 프로그램 캐시(로컬 캐시, 비동기 캐시, 동기 캐시) 관련 정보를 소개합니다. 도움이 필요한 친구는

WeChat 미니 프로그램 캐시

로컬 캐시 정보

1를 참고하세요. (wx.setStorageSync), wx.getStorage (wx.getStorageSync), wx.clearStorage (wx.clearStorageSync)

는 로컬 캐시를 설정, 획득 및 정리할 수 있습니다. 최대 로컬 캐시는 10MB입니다

2.localStorage는 영구 저장소입니다

1. 비동기 캐시

wx.setStorage(OBJECT)

는 로컬 캐시에 지정된 키에 데이터를 저장하고 덮어씁니다.

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

키에 해당하는 콘텐츠는 로컬 캐시에서 지정된 키에 해당하는 콘텐츠를 비동기적으로 가져오는 것으로 나타났습니다.

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

현재 저장소에 대한 관련 정보를 비동기적으로 가져오기

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

로컬에서 지정된 키를 비동기식으로 제거 캐시.

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

2. 동기화 캐시

wx.setStorageSync(KEY,DATA)

로컬 캐시의 지정된 키에 데이터를 저장하면 해당 키에 해당하는 원본 콘텐츠를 덮어쓰게 됩니다. 동기 인터페이스.

wx.getStorageSync(KEY)

로컬 캐시에서 지정된 키에 해당하는 콘텐츠를 동기적으로 가져옵니다.

wx.getStorageInfoSync

현재 저장소에 대한 관련 정보를 동기적으로 가져옵니다.

wx.removeStorageSync(KEY)

로컬 캐시에서 지정된 키를 동기적으로 제거합니다.

3. 캐시 지우기

wx.clearStorage()

로컬 데이터 캐시를 지우세요.

wx.clearStorageSync()

로컬 데이터 캐시를 동기적으로 삭제

동기 캐시와 비동기 캐시의 차이점에 대하여

Sync(동기, 동시에)로 끝나는 것은 모두 동기 캐시입니다. , 둘 다 차이점은 비동기식은 현재 작업을 차단하지 않으며 동기식 캐시는 동기식 메서드가 처리될 때까지 계속 실행할 수 없다는 것입니다.

그러나 일반적으로 해당 캐시를 모두 지우지는 않습니다. 해당 캐시 내용을 빈 배열로 설정하면 됩니다.

기록 검색에 대해

<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?&#39;暂无数据&#39;:item}}</view>
    </view>
  </view>
</view>

페이지

있습니다. 여기에 세 가지 바인딩 이벤트

bindinput="searchNameInput" 사용자가 입력한 데이터 가져오기

bindtap="setSearchStorage" 로컬 저장소 설정

bindtap="deleteHistory" 기록 검색 삭제

 //获取用户输入框的值
  searchNameInput:function(e){
    var that = this;
    that.setData({
      inputValue:e.detail.value
    })
  }

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

검색 클릭 시, bintap="setSearchStorage"

//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
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. 이 키의 로컬 값을 제거하려면 삭제를 클릭하세요

여기에 캐시된 양식이 키입니다. =>value

var searchData = wx .getStorageSync('searchData') || 'searchData'라는 이름의 로컬 캐시를 가져옵니다. 'searchData' 캐시가 없으면 다시 만드는 것과 같습니다. 빈 배열을 searchData 변수에 할당

searchData .push(this.data.inputValue)

사용자가 입력한 값을 searchData 변수

wx.setStorageSync('searchData', searchData)

에 푸시합니다.

API 인터페이스 호출 및 재설정 키 = 'searchData' 이 캐시의 값은 searchData와 동일합니다

아래 wx.request는 요청한 데이터의 내용입니다. 얘기하기 지겹지만 충분히 인상적입니다. .

캐시를 가져올 수 있는 바인드 탭이 없습니다. 그냥 가져와서 페이지의 데이터에 추가하세요

//从本地获取历史搜索数据

     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',

        })

       }

      }

    })

}

여기서는 'searchData' 키의 캐시된 값을 사용하는 대신 빈 배열로 설정하는 것입니다. wx.clearStorageSync를 제공하는 API, 이렇게 하면 다른 모든 캐시가 지워지고 저는 이 키의 캐시를 지우고 싶습니다.

위는 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트에 주목하세요!

관련 추천:

WeChat 미니 프로그램 팝업창 사용자 정의 코드

WeChat 애플릿의 메시지 프롬프트 상자 구현

위 내용은 WeChat 애플릿의 캐시 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!