Bagaimana untuk mendapatkan JS variabel untuk menyimpan nilai setelah refresh halaman?

Hal ini dimungkinkan dengan jendela.localStorage atau window.sessionStorage. Perbedaannya adalah bahwa sessionStorage berlangsung selama browser tetap terbuka, localStorage bertahan lalu restart browser. Kegigihan berlaku untuk seluruh situs web bukan hanya satu halaman itu.

Ketika anda perlu untuk menetapkan variabel yang harus tercermin dalam halaman berikutnya(s), menggunakan:

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

Dan di setiap halaman (seperti ketika halaman telah dimuat), seperti:

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

.getItem() akan kembali kosong jika tidak ada nilai yang disimpan, atau nilai yang disimpan.

Perhatikan bahwa hanya nilai-nilai string dapat disimpan dalam penyimpanan ini, tetapi hal ini dapat diatasi dengan menggunakan JSON.stringify dan JSON.mengurai. Secara teknis, setiap kali anda menelepon .setItem(), ia akan memanggil .toString() pada nilai dan toko itu.

MDN's DOM storage guide (terkait di bawah ini), memiliki workarounds/polyfills, yang akhirnya jatuh kembali ke hal-hal seperti cookies, jika localStorage isn't yang tersedia.

Itu tidak't menjadi ide yang buruk untuk menggunakan yang sudah ada, atau membuat anda sendiri perpustakaan mini, yang abstrak kemampuan untuk menyimpan semua jenis data (seperti objek literal, array, dll.).

Referensi:

• Browser Khusus - 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
• Browser Penyimpanan kompatibilitas - http://caniuse.com/namevalue-storage
• Menyimpan benda - https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage

Selain kue dan localStorage, ada's setidaknya satu tempat anda dapat menyimpan "semi-persistent" data klien: jendela.nama. Setiap string nilai yang anda tetapkan untuk jendela.nama akan tinggal di sana sampai jendela ditutup.

Untuk menguji itu, hanya buka console dan ketik jendela.nama = "anu", kemudian refresh halaman dan jenis jendela.nama; itu harus menanggapi dengan foo.

Ini adalah sedikit hack, tapi jika anda don't ingin cookies diisi dengan data yang tidak perlu dikirim ke server dengan setiap permintaan, dan jika anda dapat't menggunakan localStorage untuk alasan apapun (klien warisan), hal ini dapat menjadi pilihan untuk dipertimbangkan.

jendela.nama memiliki properti lain yang menarik: it's terlihat untuk windows disajikan dari domain lain; it's tidak tunduk sama-asal kebijakan seperti hampir setiap properti lainnya dari jendela. Jadi, selain untuk menyimpan "semi-persistent" data-data yang ada sementara pengguna menavigasi atau refresh halaman tersebut, anda juga dapat menggunakannya untuk CORS-cross-domain komunikasi.

Perhatikan bahwa jendela.nama hanya dapat menyimpan string, tapi dengan ketersediaan luas JSON, ini seharusnya't akan banyak masalah bahkan untuk data yang kompleks.

Anda akan memiliki untuk menggunakan cookie untuk menyimpan nilai di refresh halaman. Anda dapat menggunakan salah satu dari banyak berbasis javascript cookie perpustakaan untuk menyederhanakan cookie akses, seperti ini

Jika anda ingin hanya mendukung html5 maka anda bisa memikirkan Penyimpanan api seperti localStorage/sessionStorage

Ex: menggunakan localStorage dan cookies perpustakaan

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

Anda dapat melakukannya dengan menyimpan cookie pada sisi klien.