使用 localStorage 缓存 Kendo UI 数据源对象 [英] Caching a Kendo UI DataSource object using localStorage
问题描述
我正在使用带有外部 XML 数据源的 Kendo UI ComboBox.这是数据源代码:
I am using the Kendo UI ComboBox with an external, XML DataSource. Here's the DataSource code:
try
{
var csDataSrc = new kendo.data.DataSource(
{
transport:
{
read: "Data/StateList.xml",
dataType: "xml",
create: { cache: true }
},
schema:
{
type: "xml",
data: "/States/State",
model:
{
fields:
{
id: "id/text()",
name: "name/text()"
}
}
}
});
csDataSrc.read();
}
catch (err)
{
log.error(err.message);
}
创建数据源,这是创建剑道组合框的代码:
That creates the data source, here's the code that creates the kendo combobox:
$("#stateList").kendoComboBox(
{
index: 0,
placeholder: "Begin typing Coverage State...",
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: csDataSrc,
text: $("#hdnStateName").val(),
value: $("#hdnStateKey").val(),
change: function(e)
{
$("#hdnStateKey").val(this.value());
$("#hdnStateName").val(this.text());
}
});
这真的很好用,但是真实列表的数据是巨大的,我想将它存储在本地存储中,如下所示:localStorage.setItem("state_key", csDataSrc);然后当页面加载而不是一直从服务器端 xml 构建和读取时,我希望它是这样的:
This works really well but the data for the real list is enormous and I'd like to store it in local storage with something like this: localStorage.setItem("state_key", csDataSrc); Then when the page loads instead of building and reading from the server side xml all the time, I'd like for it to be something like this:
var csDataSrc = localStorage.getItem("state_key");
if(csDataSrc === null)
{
// create the data source with the above code
// and store it in localStorage.
}
然后在这里绑定...
...kendoComboBox(
{
...,
.dataSource: csDataSrc,
...
});
我创建的数据源很好,它似乎正确存储在 localStorage 中,但是当您离开页面并返回时,数据源始终为空.我可以使用 Chrome 开发人员工具的资源选项卡看到它,但它不会正确绑定到组合框.任何帮助或如果我需要详细说明任何事情以使这更清楚,请告诉我
I create the data source fine, it seems to store correctly in localStorage but when you leave the page and come back the data source is always null. I can see it using the resources tab of the Chrome developer tools but it won't bind to the combo box correctly. Any help or if I need to elaborate on anything to make this clearer please let me know
谢谢-s
推荐答案
为了实现这一点,您可以使用自定义读取方法 (link).
To achieve that you can use a custom read method (link).
transport: {
read: function(operation) {
var cashedData = localStorage.getItem("moviesData");
if(cashedData != null || cashedData != undefined) {
//if local data exists load from it
operation.success(JSON.parse(cashedData));
} else {
$.ajax({ //using jsfiddle's echo service to simulate remote data loading
url: '/echo/json/',
type: "POST",
dataType: "json",
data: {
json: JSON.stringify(data)
},
success: function(response) {
//store response
localStorage.setItem("moviesData", JSON.stringify(response));
//pass the pass response to the DataSource
operation.success(response);
}
});
}
}
}
这是一个工作示例:http://jsfiddle.net/LnTe7/12/
这篇关于使用 localStorage 缓存 Kendo UI 数据源对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!