0

在我们的应用程序中，我们依靠 sessionStorage 进行持久化。但是，在移动 Safari 上，在私密模式下浏览时 sessionStorage 不可用。

但是，对于那些在私人模式下使用 Safari 的客户，可以切换到内存中的方法。我们的应用程序在某种程度上仍然可以使用（刷新浏览器时您会丢失数据，但由于它是一个单页应用程序，因此您永远不必刷新）。

在开发模式下修复很容易。但是，在运行生产构建之后，我遇到了一个巨大的问题。

所以，代码值一千字。这是我们目前使用的：

索引.html

//...
<script type="text/javascript">
    var isSessionStorageAvailable = true;
    var storage =  window.sessionStorage;
    if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
        isSessionStorageAvailable = false;
    } else try {
        storage.setItem('__ccTest', '__ccTest');
    } catch (err) {
        isSessionStorageAvailable = false;
    }

</script>

<script id="microloader" type="text/javascript" src="../sencha/microloader/development.js"></script>
//...

myStore.js

Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],

config :{
    model: 'App.model.QuoteItem',
    autoLoad: true,
    autoSync: true,
    identifer: 'uuid',
    proxy:{
        type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
        id:'ccCart'
    }
},
//...

因此，在加载 sencha get 之前，我们首先检查 sessionStorage 并设置一个全局变量。因此，在存储文件加载时会选择正确的配置。

但是，我真的不喜欢这种解决方案，因为我不得不更改 index.html 文件。在开发模式下，您可以在 app.js 文件中的任何位置编写此检查，因为所有其他文件都是在之后加载的。但在生产中并非如此。所以我想知道你如何在不改变 index.html 文件的情况下正确地做到这一点？

更新

我也尝试像这样使用应用程序：

applyProxy: function(proxy, oldProxy){

    proxy.type = 'sessionstorage';
    var storage =  window.sessionStorage;
    if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
        proxy.type = 'memory';
    } else try {
        storage.setItem('__ccTest', '__ccTest');
    } catch (err) {
        proxy.type = 'memory';
    }

    this.callParent([proxy, oldProxy]);
}

然而，一些代码第一次在这个 store 上调用 sync() 时，它会在 sencha 框架内引发错误：

它在这一行的 store 类的同步方法中（它来自缩小的源，抱歉）：

d.getProxy().batch({operations: b,listeners: d.getBatchListeners()})

它会引发错误，因为 getProxy() 返回未定义。所以似乎应用程序没有工作:(。

4

3 回答 3

1

使用应用程序...

Ext.define('App.store.Quote', {
    extend   : 'Ext.data.Store',
    requires : ['App.model.QuoteItem', 'Ext.data.proxy.SessionStorage'],

    config : {
        model     : 'App.model.QuoteItem',
        autoLoad  : true,
        autoSync  : true,
        identifer : 'uuid',
        proxy     : {
            id : 'ccCart'
        }
    },

    applyProxy : function (config, oldProxy) {
        config.type = isSessionStorageAvailable ? 'sessionstorage' : 'memory';

        return this.callParent([config, oldProxy]);
    }
});
于 2013-01-23T14:25:52.157 回答
0

只需像这样创建您的商店：

Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],

config :{
    model: 'App.model.QuoteItem',
    autoLoad: true,
    autoSync: true,
    identifer: 'uuid'
}

然后，每当您检查 sessionStorage 是否可用时，只需执行

myStore.setProxy({
  type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
  id:'ccCart'
});

希望这可以帮助

于 2013-01-23T09:43:46.440 回答
0

您确定 else..try 括号不会引起问题（JSHint 抱怨）吗？

var isSessionStorageAvailable = true;
var storage =  window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
    isSessionStorageAvailable = false;
} else {
  try {
    storage.setItem('__ccTest', '__ccTest');
  } catch (err) {
    isSessionStorageAvailable = false;
  }
}
于 2013-01-23T19:05:51.590 回答