sencha touch筆記(11)——localstorage實現本地收藏功能以及圖標的變換

st實現收藏功能一個是通過調用接口，另一個是通過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');
					}

通過這種近似於‘輪詢’的方式可以實現localstorage的收藏按鈕的同步變化；

要實現點擊收藏的功能，需要的函數一個是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輪詢式的查詢方式，在線收藏要做的只是判斷一下調用收藏接口時所返回的狀態值而已。