摘要:在開發(fā)的過程中有的時候我們只需要存儲一些臨時的變量,我們并不想使用來存儲,這個時候我們可以使用來存儲,可以方便的存儲一些狀態(tài),也可以在中使用。中存儲的的值項目地址
在開發(fā)的過程中有的時候我們只需要存儲一些臨時的變量,我們并不想使用collection來存儲,這個時候我們可以使用Session來存儲,Session可以方便的存儲一些狀態(tài),也可以在helpers中使用。
Session是變化的在客戶端我們在colletcions存儲的數(shù)據(jù),當(dāng)數(shù)據(jù)在一個客戶端更新的時候,更新的數(shù)據(jù)會立刻同步到服務(wù)器和其他的客戶端,這樣因為Mongo.Collection是可以是別處Meteor的更新數(shù)據(jù),Session是一樣的道理,但是他并不會同步到服務(wù)器端,和collections一樣我們并不需要寫額外的代碼維護(hù)Session的狀態(tài),更新Session的內(nèi)容只需要是用Sessiong.set(key,value),當(dāng)Session的值變化的時候,只需要在helpers里面調(diào)用Session.get(key)即可。
在html里面顯示點(diǎn)擊數(shù)meteor-session {{> counter_template}}一共點(diǎn)擊了 {{counter}} times.
counter的值需要在helpers中返回
用Session存儲點(diǎn)擊的總數(shù)if (Meteor.isClient) { if (typeof( Session.get("counter")) == "undefined") { Session.setDefault("counter", 0); } Template.counter_template.helpers({ counter: function () { return Session.get("counter"); } }); Template.counter_template.events({ "click button": function () { var counter = Session.get("counter") counter++; Session.set("counter", counter); } }); }
我們先檢查Session里面的counter有沒有值,沒有的話就設(shè)置一個默認(rèn)值為0,不然我們在做加法的時候會有NaN(Not a Number )的錯誤。
在helper里面給counter賦值為Session.get("counter")。
處理button的點(diǎn)擊事件,每點(diǎn)擊一次,計數(shù)器加1.
我們同樣的打開連個瀏覽器做測試,點(diǎn)擊一個瀏覽器的button的時候,其顯示的計數(shù)器會加1,另一個瀏覽器沒有任何變化。
Session并不會在server或者click中保存數(shù)據(jù),這樣就會出現(xiàn)一個問題當(dāng)我刷新瀏覽器的時候,計數(shù)器會從0開始,怎么去解決這個問題呢?
可以在在瀏覽器中保存計數(shù)器的值。
if (Meteor.isClient) { if (typeof( Session.get("counter")) == "undefined") { Session.setDefault("counter", localStorage.getItem("counter")); } Template.counter_template.helpers({ counter: function () { return Session.get("counter"); } }); Template.counter_template.events({ "click button": function () { var counter = Session.get("counter") counter++; localStorage.setItem("counter", counter) Session.set("counter", counter); } }); }
localStorage是html5中的本地存儲,在每次給Session的計數(shù)器賦值的同時,我們也給本地存儲賦值,在每次初始化的時候我們給Session的默認(rèn)值是本地存儲的計數(shù)器的值,這樣只要我們本地存儲的計數(shù)器不被清除,刷新瀏覽器就不會導(dǎo)致計數(shù)器從0開始了。
localStorage中存儲的counter的值:
項目地址:https://github.com/jjz/meteor/tree/master/meteor-session
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/18812.html
摘要:在我的機(jī)子上,運(yùn)行于端口,以避免和其他默認(rèn)運(yùn)行于端口的沖突。我們可以使用命令連接數(shù)據(jù)庫查看定義應(yīng)用層次創(chuàng)建的模板應(yīng)用有一個問題,客戶端和服務(wù)器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應(yīng)用。 編者注:我們發(fā)現(xiàn)了有趣的一系列文章《30天學(xué)習(xí)30種新技術(shù)》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內(nèi)容。 到目前為止我們討論了Bower...
摘要:在我的機(jī)子上,運(yùn)行于端口,以避免和其他默認(rèn)運(yùn)行于端口的沖突。我們可以使用命令連接數(shù)據(jù)庫查看定義應(yīng)用層次創(chuàng)建的模板應(yīng)用有一個問題,客戶端和服務(wù)器段的代碼是一樣的。在中加入然后添加問題模板注意我們使用了來確保用戶未登錄的情況下應(yīng)用。 編者注:我們發(fā)現(xiàn)了有趣的一系列文章《30天學(xué)習(xí)30種新技術(shù)》,正在翻譯中,一天一篇更新,年終禮包。下面是第15天的內(nèi)容。 到目前為止我們討論了Bower...
摘要:組件有一個名叫狀態(tài)的特殊變量。將會異步地更新狀態(tài)屬性,然后讓組件重新渲染。使其可以在為時,過濾我們已完成的任務(wù)。因為我們已經(jīng)有數(shù)據(jù)在客戶端的里了,所以添加額外的總數(shù)并不會向服務(wù)器再次申請數(shù)據(jù)。 在組件狀態(tài)中存儲臨時數(shù)據(jù) 在這個步驟,我們會在為應(yīng)用的客戶端添加數(shù)據(jù)過濾特性,這樣用戶就可以通過點(diǎn)擊’確認(rèn)選框‘來查看當(dāng)前進(jìn)行的任務(wù)。我們會去學(xué)習(xí)如何僅在客戶端使用React組件狀態(tài)來存儲臨時模...
摘要:當(dāng)一個應(yīng)用啟動時,會自動加載這些庫,為應(yīng)用提供了一個基礎(chǔ)環(huán)境。也就是說,模板文件只能包含以這三種標(biāo)簽為頂層標(biāo)簽的片段。在中,我們需要判斷當(dāng)前的具體運(yùn)行環(huán)境,以便執(zhí)行相應(yīng)的代碼。 一、全棧開發(fā)平臺 - 不僅僅是前端 Meteor和那些名聲如雷貫耳的前端框架,比如Angular, React等都不一樣,它是一個 采用單一開發(fā)語言的全棧開發(fā)的平臺:開發(fā)者可以使用JavaScript同時 進(jìn)...
摘要:發(fā)布與訂閱在端使用函數(shù)注冊一個的發(fā)布者,需要在客戶端對進(jìn)行訂閱,使用訂閱了現(xiàn)在已經(jīng)添加的數(shù)據(jù)就會重新出現(xiàn)在頁面上。利用發(fā)布訂閱模式,我們也可以實(shí)現(xiàn)對于私有數(shù)據(jù)的訪問。 我們可以使用安全的方法讓用戶端不直接操作數(shù)據(jù)庫,但是還是可以直接讀取數(shù)據(jù)庫內(nèi)容,如果我們還需要保護(hù)私有的數(shù)據(jù)存儲,在客戶端直接使用Collection.find(),這樣的操作方式在實(shí)際的項目中并不會使用,這樣的數(shù)據(jù)無法...
閱讀 3207·2023-04-25 16:50
閱讀 941·2021-11-25 09:43
閱讀 3566·2021-09-26 10:11
閱讀 2547·2019-08-26 13:28
閱讀 2558·2019-08-26 13:23
閱讀 2457·2019-08-26 11:53
閱讀 3601·2019-08-23 18:19
閱讀 3018·2019-08-23 16:27