ember.js - Ember 服务在重新加载时丢失

Question

我将 Ember.Service 用作长期存在的 ember 对象，因为我需要它在我的应用程序的不同部分可用。

import Ember from 'ember';

export default Ember.Service.extend({
    user:null,
    updateActiveUser(user){
        this.set('user',user);
    },
    getActiveUser(){
        const user=this.get('user');
        if(user){
            return user;
        }else{
            return null;
        }   
    }
});

在我的组件上，我以这种方式请求这个用户: 从“ Ember ”导入 Ember ；

export default Ember.Component.extend({
activeUser:Ember.inject.service('active-user'),
list: [],
selectedUser:null,
didReceiveAttrs() {
    this._super();
    this.set('list',this.get('model'));
    const active=this.get('activeUser').getActiveUser();
    if(active){
        this.set('selectedUser',active);
    }else{
        this.set('selectedUser',this.get('model').objectAt(0));
    }
},
actions:{
    selectUser(user){
        this.set('selectedUser',user);
        this.get('activeUser').updateActiveUser(user);

    }
}
});

我的问题是，在我选择一个用户然后重新加载页面后，没有保存最后选择的用户，而是显示默认用户。

Answer 1

(在问题稍微改变后编辑)

您正在尝试让应用程序状态在客户端浏览器上持久保存，即使在页面刷新后也是如此。

我认为你应该考虑使用 localStorage .

在你的服务中做这样的事情:

import Ember from 'ember';

export default Ember.Service.extend({
  user: null,

  updateActiveUser(user){
    this.set('user', user);
    // persist the user's browser so it can be retrieved on reload
    localStorage.setItem('user', JSON.stringify(user));
  },

  getActiveUser(){
    var user = this.get('user');
    if (user) {
      return user;
    } else {
      // try to get the user from localStorage
      var foundUser = JSON.parse(localStorage.user);
      if (foundUser) {
        this.set('user', foundUser);
        return foundUser;
      } else {
        return null;
      }
    }   
  }
});

最后，你为什么要使用 const？如果您永远不会更改变量，则应使用它。但看起来用户会定期更换。如果您更改标记为 const 的变量，ES6 应该会抛出异常。 const - MDN