如何缓存用户对页面所做的更改？

Question

我使用OutputCacheAttribute 缓存整个页面。除非用户在页面上进行一些更改（例如选中某些复选框或在下拉列表中选择某些项目）并离开页面，否则一切正常。然后，当他返回此页面时，他看不到他在上次访问时所做的更改（选中的复选框或下拉菜单中的选定项目），因为它是从缓存中加载的页面的第一个 html 标记。有没有办法缓存这类信息？

Answer 1

您需要使用localStorage。 OutputCache 是服务器端，检查复选框等仅存在于客户端，除非用户实际上将其发布回服务器。即使他们这样做了，OutputCache 的参数也应该有所不同，因此用户的帖子不会（也不应该）被缓存。

无论如何，您基本上只需绑定到这些表单元素的更改/单击事件，然后在localStorage 中设置它们的值。例如：

$('#MyCheckBox').on('click', function () {
    localStorage.setItem('MyCheckBox', $(this).is(':checked'));
});

然后，在页面加载时，您可以从 localStorage 检索它并重置值：

$(document).ready(function () {
    if (localStorage.getItem('MyCheckBox')) {
        $('#MyCheckBox').attr('checked', localStorage.getItem('MyCheckBox'));
    }
});

localStorage 的浏览器支持相当广泛，但仍有可能特定用户的浏览器可能不支持它。此外，localStorage 需要用户的许可，因此可以被拒绝。 MDN has a helpful function查看是否可以使用：

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

此外，逐个字段处理此字段可能不太理想。您最好寻找一种方法来抽象获取/设置逻辑，以便您可以将其用于多个输入和类型。还可能值得研究第三方库，例如 jQuery Phoenix、Garlic 或 Sisyphus，它们可以自动为您处理这些内容。