Set / get viewmodel in localstorage if exist - knockout - javascript

Question

I'm retrieving my global navigation with CSOM. But it takes some time to execute. What I want is to store the ViewModel in localstorage the first time I'm loading the page.

I'm not having any problem retrieving the ViewModel but I need some help to check if the viewmodel exist / get view model / set viewmodel correct.
What's the best way to check if viewmodel has changed? (example code)

JS - check (not working properly)

  if (localStorage.getItem('GlobalNavigation') == null) {
        $_global_Mavention_GlobalNavigation_Some_Other_Stuff();
    } else {
        var retrievedData = JSON.parse(localStorage.getItem('GlobalNavigation'));
        ko.mapping.fromJS(GlobalNavigation, {}, self);
        $_global_Set_GlobalNavigation_Node_Active();
    }

HTML

<div id="customGlobalNavigation">
    <script src="../../_layouts/15/SuperSite/js/Knockout.js"></script>
    <script src="../../_layouts/15/SuperSite/js/globalNavigation.js"></script>
    <script>
        Mavention.GlobalNavigation.init('Managed Metadata Service', '88888888-5ce7-47cc-a696-c67f8c99943a');
    </script>
    <div class="noindex ms-core-listMenu-horizontalBox">
        <ul class="root ms-core-listMenu-root static" data-bind="foreach: globalMenuItems">
            <li class="static">
                <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: url }">
                    <span class="additional-background ms-navedit-flyoutArrow">
                        <span class="menu-item-text" data-bind="text: title"></span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
    </div>

JS

Mavention.GlobalNavigation.loadNavigationInternal = function () {
var context = SP.ClientContext.get_current();
var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
var termStore = taxonomySession.get_termStores().getByName(this.termStoreName);
var termSet = termStore.getTermSet(this.termSetId);
var terms = termSet.getAllTerms();
context.load(terms);
context.executeQueryAsync(Function.createDelegate(this, function (sender, args) {
    var termsEnumerator = terms.getEnumerator();
    var menuItems = new Array();

    while (termsEnumerator.moveNext()) {
        var currentTerm = termsEnumerator.get_current();
        Mavention.GlobalNavigation.viewModel.globalMenuItems.push(new Mavention.GlobalNavigation.MenuItem(currentTerm.get_name(), currentTerm.get_localCustomProperties()['_Sys_Nav_SimpleLinkUrl']));
    }

    ko.applyBindings(Mavention.GlobalNavigation.viewModel);
    localStorage.setItem('GlobalNavigation', Mavention.GlobalNavigation.viewModel);
    SP.UI.Notify.removeNotification(this.nid);
    $_global_Set_GlobalNavigation_Node_Active();
    $("#customGlobalNavigation > div").show();
}), Function.createDelegate(this, function (sender, args) {
    alert('The following error has occured while loading global navigation: ' + args.get_message());
}));
};

score 1 · Answer 1 · answered Aug 14 '14 at 12:46

You can set and get from local storage like this:

private saveGlobalNavigationToLocalStorage() {
    localStorage.setItem('GlobalNavigation', JSON.stringify(this.YOUR_OBJECT));
}

public getGlobalNavigation() {
    // check if it exists already
    if (!localStorage.getItem('GlobalNavigation')) {
        // If NOT - Perform your get & assign value to this.YOUR_OBJECT

        // Then call the save method to add to local storage
        this.saveGlobalNavigationToLocalStorage();                           
    } else {
        // Otherwise return object from local storage
        this.YOUR_OBJECT(JSON.parse(localStorage.getItem('GlobalNavigation')));
    }
}

Set / get viewmodel in localstorage if exist - knockout - javascript

1 Answers1