1. 程式人生 > >sencha touch筆記(11)——localstorage實現本地收藏功能以及圖示的變換

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輪詢式的查詢方式,線上收藏要做的只是判斷一下呼叫收藏介面時所返回的狀態值而已。