Question

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

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

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

所以，代码胜过千言万语。以下是我们目前使用的内容：

的index.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之前，我们首先检查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]);
}

然而，有些代码第一次在这个商店调用sync（）时会在sencha框架内引发错误：

它位于此行的商店类的同步方法内（来自缩小的来源，抱歉）：

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

它引发错误，因为getProxy（）返回undefined。所以似乎申请人没有工作:(。

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

Answer 2

只需创建您的商店：

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

希望这有帮助

Answer 3

你确定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;
  }
}

如何在存储配置生效前执行代码？

3 个答案: