使用localStorage缓存Kendo UI数据源对象

问题描述

我将Kendo UI ComboBox与外部XML数据源一起使用.这是数据源代码:

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

这将创建数据源，以下是创建kendo组合框的代码:

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.
}

然后将其绑定在这里...

Then bind it here...

...kendoComboBox(
{
    ...,
    .dataSource: csDataSrc,
    ...
});

我很好地创建了数据源，它似乎可以正确存储在localStorage中，但是当您离开页面并返回时，数据源始终为null.我可以使用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

推荐答案

要实现此目的，您可以使用自定义读取方法().

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/

Here is a working example: http://jsfiddle.net/LnTe7/12/

这篇关于使用localStorage缓存Kendo UI数据源对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！