Javascript Sencha Touch-本地存储问题
我在Sencha Touch和本地存储方面有一些问题 1) 我能够将数据保存到本地存储中,在刷新页面之前,它工作得非常好。在这之后,我仍然可以访问数据,进行更改,甚至添加新条目。但一旦页面刷新,我所有的更新都会消失。新添加的任何内容都可以,但不会保存对原始条目的更新(希望这有意义)。基本上,我可以创建一个条目并更新它,直到我刷新页面为止。此时,它将不会再次保存到本地存储。不过,新条目总是保存得很好 2) 当我删除我的所有条目,然后刷新页面时,我在控制台中得到这个错误:“UncaughtTypeError:无法读取null的属性'id'。它看起来像是在尝试加载一些东西,尽管那里什么也没有。我不知道为什么它会在这种情况下抛出错误,而不是在最初加载页面时抛出错误,因为它应该是相同的东西,对吗 型号:Javascript Sencha Touch-本地存储问题,javascript,html,sencha-touch,local-storage,Javascript,Html,Sencha Touch,Local Storage,我在Sencha Touch和本地存储方面有一些问题 1) 我能够将数据保存到本地存储中,在刷新页面之前,它工作得非常好。在这之后,我仍然可以访问数据,进行更改,甚至添加新条目。但一旦页面刷新,我所有的更新都会消失。新添加的任何内容都可以,但不会保存对原始条目的更新(希望这有意义)。基本上,我可以创建一个条目并更新它,直到我刷新页面为止。此时,它将不会再次保存到本地存储。不过,新条目总是保存得很好 2) 当我删除我的所有条目,然后刷新页面时,我在控制台中得到这个错误:“UncaughtTypeE
Ext.regModel('inventoryItem', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'quantity', type: 'int' },
{ name: 'size', type: 'int' },
{ name: 'cost', type: 'double' },
{ name: 'startDate', type: 'date' },
{ name: 'endDate', type: 'date' },
{ name: 'dailyAvgCost', type: 'string' },
{ name: 'dailyAvgSize', type: 'string' }
]
});
Ext.regStore('inventoryItemsStore', {
model: 'inventoryItem',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'inventory-app-store'
},
getGroupString: function (record) {
return '';
}
});
{
var currentinventoryItem = CostsApp.views.inventoryEditor.getRecord();
CostsApp.views.inventoryEditor.updateRecord(currentinventoryItem);
var inventoryStore = CostsApp.views.inventoryList.getStore();
if (null == inventoryStore.findRecord('id', currentinventoryItem.data.id))
{
inventoryStore.add(currentinventoryItem);
}
inventoryStore.sync();
inventoryStore.sort([{ property: 'date', direction: 'DESC'}]);
CostsApp.views.inventoryList.refresh();
}
商店:
Ext.regModel('inventoryItem', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'quantity', type: 'int' },
{ name: 'size', type: 'int' },
{ name: 'cost', type: 'double' },
{ name: 'startDate', type: 'date' },
{ name: 'endDate', type: 'date' },
{ name: 'dailyAvgCost', type: 'string' },
{ name: 'dailyAvgSize', type: 'string' }
]
});
Ext.regStore('inventoryItemsStore', {
model: 'inventoryItem',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'inventory-app-store'
},
getGroupString: function (record) {
return '';
}
});
{
var currentinventoryItem = CostsApp.views.inventoryEditor.getRecord();
CostsApp.views.inventoryEditor.updateRecord(currentinventoryItem);
var inventoryStore = CostsApp.views.inventoryList.getStore();
if (null == inventoryStore.findRecord('id', currentinventoryItem.data.id))
{
inventoryStore.add(currentinventoryItem);
}
inventoryStore.sync();
inventoryStore.sort([{ property: 'date', direction: 'DESC'}]);
CostsApp.views.inventoryList.refresh();
}
处理程序:
Ext.regModel('inventoryItem', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'quantity', type: 'int' },
{ name: 'size', type: 'int' },
{ name: 'cost', type: 'double' },
{ name: 'startDate', type: 'date' },
{ name: 'endDate', type: 'date' },
{ name: 'dailyAvgCost', type: 'string' },
{ name: 'dailyAvgSize', type: 'string' }
]
});
Ext.regStore('inventoryItemsStore', {
model: 'inventoryItem',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'inventory-app-store'
},
getGroupString: function (record) {
return '';
}
});
{
var currentinventoryItem = CostsApp.views.inventoryEditor.getRecord();
CostsApp.views.inventoryEditor.updateRecord(currentinventoryItem);
var inventoryStore = CostsApp.views.inventoryList.getStore();
if (null == inventoryStore.findRecord('id', currentinventoryItem.data.id))
{
inventoryStore.add(currentinventoryItem);
}
inventoryStore.sync();
inventoryStore.sort([{ property: 'date', direction: 'DESC'}]);
CostsApp.views.inventoryList.refresh();
}
有人能指出我做错了什么吗?看起来都不错-
store.add()
方法与store.sync()
结合使用。检查如何将数据加载到列表中,可能只是数据未加载。对我来说,store的自动加载属性并不总是有效(可能是因为某些原因,我不否认),我只是使用store.load()
。此外,您可以直接检查localStorage
来确定这一点(即代理id项localStorage.getItem('inventory-app-store')
应该为您提供类似“1,2,3”
-成功持久化记录的id)
这是一个工作示例,以防万一
new Ext.Application({
name: 'MyApp',
launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,
id : 'mainPanel',
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock : 'top',
items: [{
xtype: 'textfield',
flex: 1
}, {
text: 'Add',
listeners: {
tap: function () {
var view = this.viewport,
list = view.items.first(),
store = list.store,
fld = view.dockedItems.first().items.first(),
val = fld.getValue();
store.add({item: val});
store.sync();
fld.reset();
},
scope: this
}
}]
}],
items : [{
xtype: 'list',
itemTpl : '{item}',
store: new Ext.data.Store({
fields: ['item'],
proxy: {
id: 'items',
type: 'localstorage',
}
}).load()
}]
});
}
});
不如在if条件之前调用sync()方法。这对我有用
var inventoryStore = CostsApp.views.inventoryList.getStore();
inventoryStore.load();
inventoryStore.sync();
Store sync()对我来说非常棘手,这可能有助于了解情况
.sync()
不会更新远程o本地存储记录,除非这些记录是脏的。因此,它们不会持久
使用json类型的读取器很容易犯直接修改记录的错误,必须使用模型的方法,特别是.set()
,因为set()将记录定义为“脏”记录,只有在sync()将实际保存更改
使用本地存储进行调试尤其困难
对于以下商店:
Ext.define('MyApp.store.LocalStuff',{
extend: 'Ext.data.Store',
xtype:'localstuff',
config: {
fields:['stuffId','stuffName','stuffArray'],
storeId:'LocalStuffId',
autoLoad:false,
proxy:{
type:'localstorage',
id:'idForLocalStorage',
reader: {
type: 'json',
rootProperty: 'stuffArray'
}
}
}
});
假设您在商店中填充了以下内容:
{'stuffArray':[
{'stuffId':'130', 'stuffName':'floob', 'stuffArray':[
'first',
'second',
'tird' //here be a typo (on purpose)
]
},
{'stuffId':'131', 'stuffName':'sateo', 'stuffArray':[
'primero',
'segundo',
'tercero'
]
},
{'stuffId':'133', 'stuffName':'tolus', 'stuffArray':[
'prima',
'secunda',
'tertia'
]
}
]
}
要修复第一个记录的拼写错误,您可能会尝试执行以下操作:
{//in a given controller or view
someEventHandler:function(){
var stor = Ext.getStore('LocalStuffId');
var firstRecord = stor.getAt(0);//which will get you a record in the form of a Model
firstRecord.get('stuffArray')[2]='third';//that will fix it
//now we just sync() to make the change persist when we close the app
stor.sync();
}
}
如果您尝试了此操作,控制台上将不会出现错误,因此,一切正常。对吧?
错了!重新启动时更改不会持续。为什么?
因为记录是“干净的”
我们怎么能把它们“弄脏”呢
我发现的唯一方法(我相信还有很多)是使用模型中的方法.set()来更新记录,这会告诉商店它脏了
对于我在MVC上未经训练的大脑来说,这听起来很奇怪,最好修复上面的例子
{//in a given controller or view
someEventHandler:function(){
var stor = Ext.getStore('LocalStuffId');
var firstRecord = stor.getAt(0);//which will get you a record in the form of a Model
//you might go around the following 2 lines in many ways, the important part is .set() after that
var theArrayToFix = firstRecord.get('stuffArray');
theArrayToFix[2]='third';
firstRecord.set('stuffArray',theArrayToFix);//set() dirties the record
//NOW we sync() to make the change persist when we close the app
stor.sync();
}
}
对于来自sencha touch 1的人来说,所有这些都是显而易见的,但对于像我这样的新手来说,这几乎是一天的工作
希望这对某人有帮助,它将在将来对我有帮助。可能是其他原因
您正在使用“id”作为模型字段中的关键字名称,请将其更改为类似“inventory\u id”的其他名称,然后重试
我的印象是,id是本地存储API内部使用的,所以是保留的。我也有同样的问题,我将代理移动到模型中,这解决了我的问题。修改后的代码应如下所示:
型号:
Ext.regModel('inventoryItem', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'quantity', type: 'int' },
{ name: 'size', type: 'int' },
{ name: 'cost', type: 'double' },
{ name: 'startDate', type: 'date' },
{ name: 'endDate', type: 'date' },
{ name: 'dailyAvgCost', type: 'string' },
{ name: 'dailyAvgSize', type: 'string' }
],
proxy: new Ext.data.LocalStorageProxy({
id: 'inventory-app-store'
})
});
商店:
Ext.regStore('inventoryItemsStore', {
model: 'inventoryItem',
sorters: [{
property: 'id',
direction: 'DESC'
}],
getGroupString: function (record) {
return '';
}
});
我知道这很老,但也许它会帮助别人。
我遇到了同样的问题,并尝试重置我的本地存储window.localStorage.clear()代码>和它的工作。什么是成本p.views.inventoryEditor.updateRecord(currentinventoryItem);做听起来你的模型不知道他们是因为什么原因被编辑的。