asp.net mvc-在.net mvc中保留javascript状态

asp.net mvc - preserve javascript state in .NET MVC

本文关键字：net 保留 javascript 状态 mvc mvc- asp      更新时间：2023-09-26

我对.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();
});

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

我想到了一些选择：

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

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

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

提前感谢

更新：

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

也许我应该选择hash。。。

您可以始终使用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;
}
相关文章：