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

Question

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

Answer 1

您需要使用 localStorage。 OutputCache 是服务器端，检查复选框等仅存在于客户端，除非用户实际上 posts 返回到服务器.即使他们这样做了，OutputCache 应该在参数上有所不同，所以用户的 post 不会（也不应该）被缓存。

无论如何，您基本上只需绑定到这些表单元素的 change/click 事件，然后在 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;
    }
}

此外，逐个字段处理此字段可能不太理想。您可能最好寻找一种方法来抽象 getting/setting 逻辑，这样您就可以将它用于多个输入和类型。也可能值得研究像 jQuery Phoenix, Garlic or Sisyphus 这样的第三方库，它可以自动为您处理这些东西。

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

How to cache changes on the page made by user?

c#

outputcache

asp.net-mvc-4