Built navigation menu from Taxonomy with cache

Question

I want to build menu in the navigation Quick launch from Term store. Since the Taxonomy is very huge I want to find a way to store it in the browser's cache using JSOM. Can anyone help me?

Answer 1

I use JStorage library for this. It uses HTML5 local storage or user data for storing data on the browser.

var data = $.jStorage.get("TermSetCache");

if(!data)
{
    // Populate data from term store using JSOM
    data = GetStuffFromTermStore();
    $.jStorage.set("TermSetCache", data, { TTL: 3600 }); // Cache for 1 hour
}

// Proceed using data
alert(data);

Answer 2

I used localStorage function to achieve this goal.

now what I have actually done here to provide the solution. When user first time logs in it will fetch the details and build menu from Taxonomy using the regular script which is taking time. Once it added I am storing HTML Object in the localStorage function. And I am resetting the localStorage at midnight every day.

Here is code sample to achieve this goal.

if(localStorage.getItem('MenuItem') ===null || localStorage.getItem('LastSaved') != (new Date()).getDate() )// Clears cache on date change.

// Inserting dumy values on cache
localStorage.setItem('MenuItem', '<li></li>');

// if No Cached Data;   
    if(localStorage.MenuItem.length <100){
    // Your function to build menu from taxonomy.
.
.
.

localStorage.setItem('LastSaved', (new Date()).getDate());
}
//Cached Menu
Else 
{
        var MenuItems = localStorage.MenuItem;
        ApplyToMenu(MenuItems); // function to inject the menu items in Quick Lanuch

}

Answer 3

Take note that if you only use the html5 localStorage API, this cache is built for every individual user separately. Ideally you build a webservice that does the caching for all users together and from within your page, you pull the information from this webservice. Then you can copy the retrieved data into localStorage.