0

我对 .NET MVC 框架的无状态特性有一些疑问。

我有一些 HTML 像

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<button id="btnShowMore">Show More</button>
<a href="www.google.com">Google</a>

我的javascript就像

var maxDisplay = 5;
var unit = 5;
$("li").slice(maxDisplay).hide();
if ($("li").length <= maxDisplay) $('#btnShowMore').hide();
$('#btnShowMore').click(function () {
    maxDisplay += unit;
    $("li").slice(0, maxDisplay - 1).show();
    if ($("li").length <= maxDisplay) $('#btnShowMore').hide();
});

现在，如果我展开我的列表，导航到 google，然后单击浏览器中的后退按钮，列表会忘记我所做的，并且只显示前 5 个列表项，这不是我想要的。

我想到了一些选择：

  1. 曲奇饼。不是我想要的，因为有很多这样的页面，我需要为每个页面设置 cookie

  2. 稍微操纵 url，比如利用 window.location.hash。也不好，因为那将是另一页

有一些传统的方法可以做到这一点吗？

提前致谢

更新：

似乎没有更多的解决方案出来了。我肯定更喜欢 localStorage 而不是 cookie，因为不需要在客户端和服务器之间传输这个变量，但是需要检查页面是第一次加载（清除缓存变量并显示 5 个项目）还是从导航返回加载（读取缓存和显示缓存的项目数）。

也许我应该和哈希一起去......

4

1 回答 1

2

您总是可以使用localStorage来持久化您的应用程序状态。并调整您的脚本，以便它直接读取和写入它。

以下是我常用来从localStorage

function setStorageItem(key, value) {
    var localStorage = window.localStorage;
    if (localStorage) {
        try {
            localStorage.setItem(key, window.JSON.stringify(value));
        } catch (e) {
        }
    }
    return !!localStorage;
}

function getStorageItem(key, defaultValue) {
    var localStorage = window.localStorage;
    if (localStorage) {
        var value = localStorage.getItem(key);
        if (value) {
            return $.parseJSON(value);
        }
    }
    return defaultValue || undefined;
}

您的代码将是：

var maxDisplay = getStorageItem('maxDisplay', 5),
    unit = 5,
    more = $('#btnShowMore');

$("li").slice(maxDisplay).hide();

if ($("li").length <= maxDisplay){
    more.hide();
}

more.click(function () {
    maxDisplay += unit;

    setStorageItem('maxDisplay', maxDisplay); // remember it.

    $("li").slice(0, maxDisplay - 1).show();

    if ($("li").length <= maxDisplay){
        more.hide();
    }
});

如果 localStorage 不工作，您的代码将照常工作，如果是，它会记住该maxDisplay属性。

更新

如果您坚持使用 cookie：

function setCookie(key, value, expires) {
    var defaults = {
        path: '/',
        expires: 1000 * 60 * 60 * 6 * 24 * 30 // 6 months
    };
    var date = new Date();
    var offset = expires || defaults.expires;
    date.setTime(date.getTime() + offset);
    var json = window.JSON.stringify(value);
    var cookie = '{0}={1}; expires={2}; path={3}'.format(key, json, date.toGMTString(), defaults.path);
    document.cookie = cookie;
}

function getCookie(key, defaultValue) {
    var identifier = '{0}='.format(key);
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(identifier) == 0) {
            var value = cookie.substring(identifier.length, cookie.length);
            return $.parseJSON(value);
        }
    }
    return defaultValue;
}
于 2013-02-11T21:46:44.267 回答