Meteor的臨時(shí)的存儲(chǔ):Session

Meils 發(fā)布于2019-06-26 16:58 / 3366人閱讀

摘要：在開(kāi)發(fā)的過(guò)程中有的時(shí)候我們只需要存儲(chǔ)一些臨時(shí)的變量，我們并不想使用來(lái)存儲(chǔ)，這個(gè)時(shí)候我們可以使用來(lái)存儲(chǔ)，可以方便的存儲(chǔ)一些狀態(tài)，也可以在中使用。中存儲(chǔ)的的值項(xiàng)目地址

在開(kāi)發(fā)的過(guò)程中有的時(shí)候我們只需要存儲(chǔ)一些臨時(shí)的變量，我們并不想使用collection來(lái)存儲(chǔ)，這個(gè)時(shí)候我們可以使用Session來(lái)存儲(chǔ)，Session可以方便的存儲(chǔ)一些狀態(tài)，也可以在helpers中使用。

Session是變化的在客戶端

我們?cè)赾olletcions存儲(chǔ)的數(shù)據(jù)，當(dāng)數(shù)據(jù)在一個(gè)客戶端更新的時(shí)候，更新的數(shù)據(jù)會(huì)立刻同步到服務(wù)器和其他的客戶端，這樣因?yàn)镸ongo.Collection是可以是別處Meteor的更新數(shù)據(jù)，Session是一樣的道理，但是他并不會(huì)同步到服務(wù)器端，和collections一樣我們并不需要寫(xiě)額外的代碼維護(hù)Session的狀態(tài)，更新Session的內(nèi)容只需要是用Sessiong.set(key,value),當(dāng)Session的值變化的時(shí)候，只需要在helpers里面調(diào)用Session.get(key)即可。

在html里面顯示點(diǎn)擊數(shù)


    meteor-session




{{> counter_template}}

counter的值需要在helpers中返回

用Session存儲(chǔ)點(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有沒(méi)有值，沒(méi)有的話就設(shè)置一個(gè)默認(rèn)值為0，不然我們?cè)谧黾臃ǖ臅r(shí)候會(huì)有NaN(Not a Number )的錯(cuò)誤。
在helper里面給counter賦值為Session.get("counter")。
處理button的點(diǎn)擊事件，每點(diǎn)擊一次，計(jì)數(shù)器加1.
我們同樣的打開(kāi)連個(gè)瀏覽器做測(cè)試，點(diǎn)擊一個(gè)瀏覽器的button的時(shí)候，其顯示的計(jì)數(shù)器會(huì)加1，另一個(gè)瀏覽器沒(méi)有任何變化。

刷新瀏覽器會(huì)導(dǎo)致計(jì)數(shù)器從0開(kāi)始

Session并不會(huì)在server或者click中保存數(shù)據(jù)，這樣就會(huì)出現(xiàn)一個(gè)問(wèn)題當(dāng)我刷新瀏覽器的時(shí)候，計(jì)數(shù)器會(huì)從0開(kāi)始，怎么去解決這個(gè)問(wèn)題呢？
可以在在瀏覽器中保存計(jì)數(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中的本地存儲(chǔ)，在每次給Session的計(jì)數(shù)器賦值的同時(shí)，我們也給本地存儲(chǔ)賦值，在每次初始化的時(shí)候我們給Session的默認(rèn)值是本地存儲(chǔ)的計(jì)數(shù)器的值，這樣只要我們本地存儲(chǔ)的計(jì)數(shù)器不被清除，刷新瀏覽器就不會(huì)導(dǎo)致計(jì)數(shù)器從0開(kāi)始了。

localStorage中存儲(chǔ)的counter的值：

項(xiàng)目地址：https://github.com/jjz/meteor/tree/master/meteor-session