sencha touch筆記(11)——localstorage實現本地收藏功能以及圖示的變換
阿新 • • 發佈:2019-01-09
st實現收藏功能一個是通過呼叫介面,另一個是通過localstorage進行本地資料的儲存和儲存獲取。如果是本地進行儲存並且要實現收藏按鈕隨時更新狀態,並且能夠根據時候收藏進行變化的話,就需要每次展現頁面資料的時候檢視當前資料是否在localstorage裡面,如果是的話,就新增一個收藏樣式的圖示,如果不是的話,則新增一個還沒有收藏樣式的圖示。比如在我這裡,每次要去載入頁面的時候都要去看下localstorage的情況:
通過這種近似於‘輪詢’的方式可以實現localstorage的收藏按鈕的同步變化;var isLiked = favourites.find('id', likecoureseId); if(isLiked === -1) { var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0]; btnCol.setIconCls('like_icon'); }else { var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0]; btnCol.setIconCls('after_like_icon'); }
要實現點選收藏的功能,需要的函式一個是add,一個是remove,其實在localstorage裡面儲存的到底還是一個store而已,只不過你將這個store的儲存方式定義為了‘localstorage’而已。那麼在執行收藏操作的時候直接將當前的資料塞到對應的store內即可。程式碼如下:
likeAct: { tap: function(btn) { var me = this; var likecoureseId = PiNewsRecord.id; var favourites = Ext.data.StoreManager.lookup('LikeNews_store'); var isLiked = favourites.find('id', likecoureseId); if(isLiked === -1) { favourites.add(PiNewsRecord); util.showMessage('收藏成功', true); //Ext.Msg.alert('收藏成功'); var likeBtn = document.getElementsByClassName("item_button_style")[1]; btn.setIconCls('after_like_icon'); }else { favourites.remove(favourites.getAt(isLiked)); util.showMessage('取消收藏', true); btn.setIconCls('like_icon'); } favourites.sync(); } },
而對於線上收藏的原因應該也差不多,只不過相對於localstorage輪詢式的查詢方式,線上收藏要做的只是判斷一下呼叫收藏介面時所返回的狀態值而已。