сохранить javascript состояние в .NET MVC

Question

У меня есть некоторая проблема с безгражданностью структуры .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. печенья. не совсем то, что я хочу, потому что таких страниц много, и мне нужен куки-файл для каждого из них.

2. немного манипулировать URL-адресом, например, воспользоваться окном.location.hash. также не хорошо, потому что это будет другая страница

Есть ли какой-нибудь обычный способ сделать это?

Заранее спасибо

---

UPDATE:

кажется, что нет больше решений не выходит. Я определенно предпочел бы localStorage над cookie, так как нет необходимости передавать эту переменную между клиентом и сервером, но необходимо проверить, является ли страница первой загрузкой (очистить кешированную переменную и показать 5 элементов) или загрузить с навигационной системы обратно (чтение кеша и show cached количество элементов).

может быть, я должен идти с хэш ...

Answer 1

Вы всегда можете использовать 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.

Update

В случае, если вы настаиваете на использовании печенье:

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; 
}