Ember.js - 是否可以在window.localStorage中存储/恢复Ember.TEMPLATES?

时间:2013-06-17 10:00:15

标签: ember.js local-storage handlebars.js

我想知道是否可以在Ember.TEMPLATES客户端中存储/恢复localStorage缓存对象?

我想要这样做的原因是因为我不是首先向客户端发送一大堆预编译模板,而是从后端服务器“按需”加载它们。现在,如果用户决定重新加载浏览器,我想保存/恢复整个Ember.TEMPLATES对象,以便客户端不需要再次查询后端服务器中已经请求的模板文件。

我可以使用以下功能将模板存储在localStorage中,但我想它根本不是很好(或性能优化):

saveCacheToLocalStorage: function() {
  var stringifiedCache = "{ ";

  for(var tmpl in Ember.TEMPLATES) {
    stringifiedCache += JSON.stringify({name: tmpl, template: Ember.TEMPLATES[tmpl].toString()});
  }

  stringifiedCache += " }";

  localStorage.setItem(this.localStorageId, stringifiedCache);

  this.hasChanged = false;

  return true;
}

但如果我尝试解析localStorage中的字符串化值,则会因Syntax Error: Unexpected token: {而失败。对我的问题有更好的解决方案吗?

我首先无法提供所有预编译模板,因为Web应用程序的用户访问不同的区域并使用Web应用程序的不同功能,因此向每个用户提供完整的模板集是不可接受的

修改

我的脚本中有一些错误,现在我可以在localStorage中存储/恢复模板,但是我必须创建另一个缓存,它暂时存储我从Web服务器获取的模板,以便我能够将它们保存到localStorage。不知怎的,我无法从Ember.TEMPLATES本身获取模板,因为我总是得到相同的函数作为回报,这是非常无用的(一些常见的弃用警告等等)。

2 个答案:

答案 0 :(得分:1)

即使语法正确,它仍然无法工作,因为生成了模板函数并包含闭包(作用域)信息。

最好的办法是将所有模板预编译为单个templates.js并使用(滥用)localStorage来缓存整个模板脚本。 (手动或http://addyosmani.github.io/basket.js/

请注意localStorage是同步的,因此它会阻止并可能会挂起浏览器以获取大型模板脚本。

答案 1 :(得分:0)

如果必须这样做,请不要缓存已编译的模板(它们是函数,不能存储在localStorage中)。您可以自己缓存模板,并在从localStorage中读取时重建已编译的模板。 (请记住在需要时自己使模板过期.localStorage本身不会过期。)