资讯专栏INFORMATION COLUMN

Meteor的临时的存储:Session

Meils / 3243人阅读

摘要:在开发的过程中有的时候我们只需要存储一些临时的变量,我们并不想使用来存储,这个时候我们可以使用来存储,可以方便的存储一些状态,也可以在中使用。中存储的的值项目地址

在开发的过程中有的时候我们只需要存储一些临时的变量,我们并不想使用collection来存储,这个时候我们可以使用Session来存储,Session可以方便的存储一些状态,也可以在helpers中使用。

Session是变化的在客户端

我们在colletcions存储的数据,当数据在一个客户端更新的时候,更新的数据会立刻同步到服务器和其他的客户端,这样因为Mongo.Collection是可以是别处Meteor的更新数据,Session是一样的道理,但是他并不会同步到服务器端,和collections一样我们并不需要写额外的代码维护Session的状态,更新Session的内容只需要是用Sessiong.set(key,value),当Session的值变化的时候,只需要在helpers里面调用Session.get(key)即可。

在html里面显示点击数

    meteor-session




{{> counter_template}}


counter的值需要在helpers中返回

用Session存储点击的总数
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有没有值,没有的话就设置一个默认值为0,不然我们在做加法的时候会有NaN(Not a Number )的错误。
在helper里面给counter赋值为Session.get("counter")
处理button的点击事件,每点击一次,计数器加1.
我们同样的打开连个浏览器做测试,点击一个浏览器的button的时候,其显示的计数器会加1,另一个浏览器没有任何变化。

刷新浏览器会导致计数器从0开始

Session并不会在server或者click中保存数据,这样就会出现一个问题当我刷新浏览器的时候,计数器会从0开始,怎么去解决这个问题呢?
可以在在浏览器中保存计数器的值。

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);
        }
    });
}

localStoragehtml5中的本地存储,在每次给Session的计数器赋值的同时,我们也给本地存储赋值,在每次初始化的时候我们给Session的默认值是本地存储的计数器的值,这样只要我们本地存储的计数器不被清除,刷新浏览器就不会导致计数器从0开始了。

localStorage中存储的counter的值:

项目地址:https://github.com/jjz/meteor/tree/master/meteor-session

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/18812.html

相关文章

  • Day 15:Meteor —— 从零开始创建一个 Web 应用

    摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...

    Big_fat_cat 评论0 收藏0
  • Day 15:Meteor —— 从零开始创建一个 Web 应用

    摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...

    lpjustdoit 评论0 收藏0
  • 翻译 Meteor React 制作 Todos - 08 - 模板UI状态

    摘要:组件有一个名叫状态的特殊变量。将会异步地更新状态属性,然后让组件重新渲染。使其可以在为时,过滤我们已完成的任务。因为我们已经有数据在客户端的里了,所以添加额外的总数并不会向服务器再次申请数据。 在组件状态中存储临时数据 在这个步骤,我们会在为应用的客户端添加数据过滤特性,这样用户就可以通过点击’确认选框‘来查看当前进行的任务。我们会去学习如何仅在客户端使用React组件状态来存储临时模...

    dcr309duan 评论0 收藏0
  • Meteor——以NodeJS为基础环境,MongoDB为数据环境全栈开发平台!

    摘要:当一个应用启动时,会自动加载这些库,为应用提供了一个基础环境。也就是说,模板文件只能包含以这三种标签为顶层标签的片段。在中,我们需要判断当前的具体运行环境,以便执行相应的代码。 一、全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进...

    chenatu 评论0 收藏0
  • Meteor:发布与订阅

    摘要:发布与订阅在端使用函数注册一个的发布者,需要在客户端对进行订阅,使用订阅了现在已经添加的数据就会重新出现在页面上。利用发布订阅模式,我们也可以实现对于私有数据的访问。 我们可以使用安全的方法让用户端不直接操作数据库,但是还是可以直接读取数据库内容,如果我们还需要保护私有的数据存储,在客户端直接使用Collection.find(),这样的操作方式在实际的项目中并不会使用,这样的数据无法...

    animabear 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<