Sayfa yenilendikten sonra JS değişkeninin değerini korumasını nasıl sağlarım?

Bu window.localStorage veya window.sessionStorage ile mümkündür. Aradaki fark, sessionStorageın tarayıcı açık kaldığı sürece devam etmesi, localStorageın ise tarayıcının yeniden başlatılmasından sonra da devam etmesidir. Kalıcılık sadece tek bir sayfa için değil tüm web sitesi için geçerlidir.

Sonraki sayfa(lar)a yansıtılması gereken bir değişken ayarlamanız gerektiğinde şunu kullanın:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Ve herhangi bir sayfada (sayfa yüklendiğinde olduğu gibi), şöyle olsun:

var someVarName = localStorage.getItem("someVarKey");

.getItem(), saklanan değer yoksanull` değerini veya saklanan değeri döndürür.

Bu depolama alanında sadece string değerlerin saklanabileceğini unutmayın, ancak JSON.stringify ve JSON.parse kullanılarak bunun üstesinden gelinebilir. Teknik olarak, .setItem() işlevini her çağırdığınızda, değer üzerinde .toString() işlevini çağıracak ve bunu saklayacaktır.

MDN'nin DOM depolama kılavuzunda (aşağıda bağlantı verilmiştir), `localStorage' mevcut değilse çerezler gibi şeylere geri dönen geçici çözümler / çoklu doldurmalar vardır.

Herhangi bir veri türünü (nesne değişmezleri, diziler vb.) kaydetme yeteneğini soyutlayan mevcut bir kütüphaneyi kullanmak veya kendi mini kütüphanenizi oluşturmak kötü bir fikir olmayacaktır.

Referanslar:

• Tarayıcı Depolama - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON - https://developer.mozilla.org/en-US/docs/JSON
• Tarayıcı Depolama uyumluluğu - http://caniuse.com/namevalue-storage
• Nesnelerin depolanması - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Sayfa yenileme sırasında değeri saklamak için çerez kullanmanız gerekecektir. Çerez erişimini basitleştirmek için bu gibi birçok javascript tabanlı çerez kütüphanesinden herhangi birini kullanabilirsiniz.

Yalnızca html5'i desteklemek istiyorsanız, localStorage/sessionStorage gibi Storage api'sini düşünebilirsiniz.

Örn: localStorage ve cookies library kullanarak

var mode = getStoredValue('myPageMode');

function buttonClick(mode) {
    mode = mode;
    storeValue('myPageMode', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

Bunu, çerezleri istemci tarafında depolayarak yapabilirsiniz.