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. window.location.hash を利用するなど、URL を少し操作します。また、それは別のページになるため、良くありません

これを行う従来の方法はありますか？

前もって感謝します

アップデート：

もう解決策は出ていないようです。クライアントとサーバー間でこの変数を転送する必要がないため、cookie よりも localStorage を使用することをお勧めしますが、ページが最初にロードされるか (キャッシュされた変数をクリアして 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 に答える