我对.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个列表项,这不是我想要的。
我想到了一些选择:
饼干。不是我想要的,因为有很多这样的页面,我需要每个页面的cookie
操纵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;
}