2. 程式人生 > >wx.getStorage非同步和wx.getStorageSync同步區別

wx.getStorage非同步和wx.getStorageSync同步區別

阿新 • • 發佈：2018-12-28

關於本地快取

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）

可以對本地快取進行設定、獲取和清理。本地快取最大為10MB

2.localStorage 是永久儲存

一、非同步快取

wx.setStorage(OBJECT)

將資料儲存在本地快取中指定的 key 中，會覆蓋掉原來該 key 對應的內容

?

1

2

3

4

5

6

7

8

9

wx.setStorage({

 

 key:"key",

 

 data:"value"

 

})

wx.getStorage(OBJECT)

從本地快取中非同步獲取指定 key 對應的內容。

?

1

2

3

4

5

6

7

8

9

10

11

wx.getStorage({

 

 key: 'key',

 

 success: function(res) {

 

   console.log(res.data)

 

 }

 

})

wx.getStorageInfo(OBJECT)

非同步獲取當前storage的相關資訊

?

1

2

3

4

5

6

7

8

9

10

11

12

13

wx.getStorageInfo({

 

 success: function(res) {

 

  console.log(res.keys)

 

  console.log(res.currentSize)

 

  

console.log(res.limitSize)

 

 }

 

})

wx.removeStorage(OBJECT)

從本地快取中非同步移除指定 key 。

?

1

2

3

4

5

6

7

8

9

10

11

wx.removeStorage({

 

 key: 'key',

 

 success: function(res) {

 

  console.log(res.data)

 

 }

 

})

 二、同步快取

wx.setStorageSync(KEY,DATA)

將 data 儲存在本地快取中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個同步介面。

wx.getStorageSync(KEY)

從本地快取中同步獲取指定 key 對應的內容。

wx.getStorageInfoSync

同步獲取當前storage的相關資訊

wx.removeStorageSync(KEY)

從本地快取中同步移除指定 key 。

三、清理快取

wx.clearStorage()

清理本地資料快取。

wx.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

8

9

10

11

//獲取使用者輸入框的值

  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

var searchData = wx.getStorageSync('searchData') || []

獲取本地名字為'searchData'的快取，如果'searchData'這個快取不存在就相當於重新什麼一個空陣列，賦值給searchData這個變數

searchData.push(this.data.inputValue)

將使用者輸入的值PUSH進searchData這個變數裡

wx.setStorageSync('searchData', searchData)

呼叫API介面，重新設定key = 'searchData'的這個快取的value等於searchData

下面的wx.request是請求資料的內容，說膩了，印象夠深了。

這裡沒有繫結獲取快取的bindtap，只要獲取到，然後新增到Page裡面的data

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

//從本地獲取歷史搜尋資料

 

     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'這個key的快取的value為空陣列，而不是使用API提供的wx.clearStorageSync，這個會清除其他的所有快取，而我只是想清除這一個key的快取

 

相關推薦

wx.getStorage非同步和wx.getStorageSync同步區別

關於本地快取 1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync） 可以對本地快取進行設定、獲取和清理。本地快取最大為10MB 2.

AsyncContext非同步和多執行緒區別

AsyncContext不是非同步輸出時使用的，而是同步輸出，但是解放伺服器端的執行緒使用，使用AsyncContext的時候，對於瀏覽器來說，他們是同步在等待輸出的，但是對於伺服器端來說，處理此請求的執行緒並沒有卡在那裡等待，則是把當前的處理轉為執行緒池處理了，關鍵就在於執行緒池，伺服器端會起一個執行緒

非同步和非阻塞的區別

我們說Twisted是一個非同步的網路框架，經常我們也聽到一個詞語叫做非阻塞，那麼他們有什麼區別呢？非同步：呼叫在發出之後，這個呼叫就直接返回，不管有無結果；非同步是過程。 非阻塞：關注的是程式在等待呼叫結果（訊息，返回值）時的狀態，指在不能立刻得到結果之前，該呼叫不會阻塞當

小程式wx:for、wx:for-items和wx:for-item的正確用法

wx:for = "{{list}}" 用來迴圈陣列 如果是一維陣列，例項： <view wx:for="{{list}}"> {{index}} {{item.name}} </view> 以上程式碼中item即為list的別名。 如果是二維或

小程式磚塊（三）用wx.setStorage、wx.getStorage和wx.getStorageSync進行頁面間傳值

先是儲存wx.setStorage Page({ data: { testnum:""//設定測試引數 }, test:function(){ var Num = this.data.testnum; wx.setStorage({//儲

坑：微信小程式wx.request和wx.uploadFile中傳引數的區別

微信小程式中通過元件<form>提交表單的時候，在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求，提交表單資料，通過引數data傳資料， wx.request({ url: 'test.php', //僅為示例，

微信小程式裡 wx:for和wx:for-item區別（補充下wx:key）

 wx:for 一維陣列情況： 在頁面上 view  wx:for  ="{{list}}"   {{item.id}} view 是迴圈list item是List的別名 多維陣列情況： view  wx:fo

微信小程式wx:for和wx:for-item的區別

wx:for="{{list}}"用來迴圈陣列，而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來：   1 2 3 <view wx

Qt理解同步/非同步和阻塞/非阻塞的區別

同步、非同步： 概念：訊息的通知機制解釋：涉及到IO通知機制；所謂同步，就是發起呼叫後，被呼叫者處理訊息，必須等處理完才直接返回結果，沒處理完之前是不返回的，呼叫者主動等待結果；所謂非同步，就是發起呼叫後，被呼叫者直接返回，但是並沒有返回結果，等處理完訊息後，通過狀態、通知或者回調函式來通知呼叫者，呼叫者被

並行和併發，同步和非同步的區別

  老是忘記併發和並行，同步和非同步之間的區別，今天寫篇部落格，加深印象。 併發 & 並行  併發：當有多個執行緒在操作時,如果系統只有一個CPU,則它根本不可能真正同時進行一個以上的執行緒，它只能把CPU執行時間劃分成若干個時間段,再將時間段分配給各個執行緒執行

java同步，非同步和阻塞，非阻塞的聯絡和區別

所謂同步就是一個任務的完成需要依賴另外一個任務時，只有等待被依賴的任務完成後，依賴的任務才能算完成，這是一種可靠的任務序列。要麼成功都成功，失敗都失敗，兩個任務的狀態可以保持一致。而非同步是不需要等待被依賴的任務完成，只是通知被依賴的任務要完成什麼工作，依賴

PostMessage(非同步)和SendMessage(同步)的區別

PostMessage和SendMessage的區別 1， PostMessage只把訊息放入佇列，不管其他程式是否處理都返回，然後繼續執行，這是個非同步訊息投放函式。而SendMessage必須等待其他程式處理訊息完了之後才返回，繼續執行，這是個同步訊息投放函式。而且，

HTTP請求非同步和同步的區別

請求方式，分為GET與POST：  GET  最為常見的HTTP請求，普通上網瀏覽頁面就是GET。GET方式的引數請求直接跟在URL後，以問號開始。（JS中用 window.location.search獲得）。引數可以用encodeURIComponent進行編碼，使用方式:  var EnParam =

POST和GET以及同步請求和非同步請求的區別

一、HTTP是應用層的網路傳輸協議，對於HTTP的請求方式主要流行的GET請求與POST請求對於GET請求與POST請求的區別 1.GET請求，伺服器以及引數都會出現在請求介面中，也就是請求引數也是介面的一部分，而POST請求在介面中只有伺服器地址，而引數會作為請求提交

程序和執行緒的區別？同步和非同步的區別？並行和併發的區別？

程序是資源的分配和排程的一個獨立單元，而執行緒是CPU排程的基本單元 同一個程序中可以包括多個執行緒，並且執行緒共享整個程序的資源（暫存器、堆疊、上下文），一個進行至少包括一個執行緒。 程序的建立呼叫fork或者vfork，而執行緒的建立呼叫pthread_create，程序結束後它擁有的所有執行緒都將銷燬

淺談ajax非同步和同步載入的區別

說簡單點，ajax預設是非同步載入的，也就是說第一個fun請求資料時，資料還未返回時便開始執行第二個fun了， 如果將其設定為同步請求，則會等第一個function執行完後才會載入第二個function了 非同步請求： var flag=true; $.ajax({ u

深入理解ajax同步和異步的區別

深入理解ajax同步和異步的區別說明： 同步可以改變外部定義的變量值，異步可以提高加載效率 示例：a. 說明：b. 原代碼： <script> var a = 0 function loadDoc(file,async=true){ if(window.XMLHttpRequest){ // c

同步異步以及阻塞和非阻塞的區別

結束 線程 同步異步 成功 -s 區別 狀態 得到 概念 一、同步與異步的區別： 同步：一個服務的完成需要依賴其他服務時，只有等待被依賴的服務完成後，才算完成，這是一種可靠的服務序列。要麽成功都成功，失敗都失敗，服務的狀態可以保持一致。 異步：一個服務的完成需要依賴其他

小程序 數據緩存 wx.getStorage等等

clear 作用 pro list developer lis ear 沒有 記得 使用範圍很廣。尤其是操作用戶沒有保存過，或者是最快捷獲取已有的數據 三個步驟：1.設置需要緩存的數據 2.獲取緩存的數據

同步非同步，阻塞非阻塞區別聯絡

  實際上同步與非同步是針對應用程式與核心的互動而言的。同步過程中程序觸發IO操作並等待(也就是我們說的阻塞)或者輪詢的去檢視IO操作(也就是我們說的非阻塞)是否完成。 非同步過程中程序觸發IO操作以後，直接返回，做自己的事情，IO交給核心來處理，完成後核心通知程序IO完成。