ExtJs – Implement HTML5 localStorage for Saving Tab State

With local storage, web applications can store data locally within the user’s browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per domain. All pages, from one domain, can store and access the same data.
from www.w3schools.com

Dalam bahasa saya mudahnya localStorage adalah salah satu media penyimpanan client-side layaknya Cookies. Hanya saja jika cookies punya expiration date maka localStorage tidak memilikinya, yang artinya data tidak akan dihapus meskipun browser ditutup dan akan ada di hari berikutnya sekalipun.

Untuk implementasi kali ini saya akan coba pada hal sederhana dahulu, yakni untuk menyimpan state active tab berdasarkan pilihan terakhir dari user.
Jadi ketika pertama me-load aplikasi maka active tab langsung mengarah pada tab terakhir yang anda pilih meskipun browser telah anda refresh atau anda tutup.

contoh penerapannya seperti berikut :


/**
 * @author Irfan Maulana
 */

Ext.define('TEST.view.view.MainView', {
    extend: 'Ext.tab.Panel',  

    layout : 'fit',

    items : [{
    	xtype : 'panel',
    	title : 'Panel 1'
    },{
    	xtype : 'panel',
    	title : 'Panel 2'
    },{
    	xtype : 'panel',
    	title : 'Panel 3'
    }],

    listeners:{
        boxready : function(tabPanel, width, height, eOpts){
        	if(typeof(localStorage) !== 'undefined'){
        		var index = 0;
        		if(localStorage.getItem('activeMainTab') != null) index = localStorage.getItem('activeMainTab');
        		tabPanel.setActiveTab(parseInt(index));
        	}
        },
    	tabchange : function(tabPanel, newCard, oldCard, eOpts) {
    		var index = tabPanel.items.findIndex('id', newCard.id);
    		if(typeof(localStorage) !== 'undefined'){
        		localStorage.setItem('activeMainTab', parseInt(index));
        	}
    	}
    }

});

Penjelasan mudahnya adalah saya men-set selected index tab ke dalam localStorage di listener tabChange.
kemudian di listener boxready saya menge-cek apakah localStorage tersebut ada atau tidak, bila ada saya setActiveTab ke index tersebut dan bila tidak ada maka saya set ke index 0.

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s