持久保存js用户控制状态

Question

我的 RIA 应用程序有很多 js UI 控件（几乎所有都是 jQuery UI 部分，如 datepicker、dialog、jqgrid）。因此，然后用户在一个页面上使用一些控件，然后转到另一个页面，然后单击返回所有页面组件都具有初始状态（文本框为空，网格为空等）。那么如何保留 UI 控件状态，然后在页面之间恢复它呢？看来我需要一些类似 JS 序列化/反序列化方法在用户服务器会话中存储序列化数据。我怎样才能以最小的成本做到这一点？你在项目中是如何做到这一点的？任何想法、链接、帖子将不胜感激。提前谢谢你们了！

PS 我的项目是 ASP .NET MVC3

---

编辑

现在我记得 memnto 设计模式。你们中有人能给我一些与这个想法相关的建议吗？ 再次感谢！

Answer 1

我写这篇文章是对你的问题的评论，但我将其作为答案，因为这可能是做到这一点的唯一方法，而不必使用某种侧面插件“破解”它。

Viewstate 的使用与您是否使用 JQuery UI“插件”无关。您所要做的就是使用服务器端控件。

请注意，为此您必须使用控件客户端名称，例如：

$('#<%= MyDateTextbox.ClientID %>').datepicker(); 

这样您就可以在服务器端控件上应用 JQuery UI，并利用 Viewstate 在后退按钮导航上恢复控件值。

Answer 2

我会使用 Persist-JS （GitHub 上的 Persist-JS ）、jQuery（您已经在使用）和 json.js (JSON-js在GitHub）。
像这样：

var store;
//Restore form data
$(function() {
    store = new Persist.Store('My Page Store');
    var formDataStr = store.get('formdata');
    if (formDataStr !== null) {
        var formData = eval('(' + formDataStr + ')');
        if (formData.hasData) {
            $(':input').each(function() {
                if (this.name != undefined && this.name != "") {
                    if (formData[this.name] != undefined) {
                        $(this).val(formData[this.name].value);
                    }
                }
            });
        }
    }
});

并且...

//Persist form data
$(window).unload(function() {
    var formData = {};
    $(':input').each(function() {
        if (this.name != undefined && this.name != "") {
            formData[this.name] = {};
            formData[this.name].value = $(this).val();
        }
    });
    formData.hasData = true;
    store.set('formdata', JSON.stringify(formData));
});

换句话说，循环遍历页面上的所有输入，存储它们的值 ($.val())，创建一个 JSON 对象并将其保留为这些值。恢复表单时，只需执行相反的操作 - 循环输入并按名称 formData[name] 从 JSON 对象中获取属性。那里有一些防御性的东西（即：检查持久化对象是否为空，这就是 persist-js 的工作原理）。