javascript - 在本地存储中设置/获取 View 模型(如果存在) - knockout - javascript

Question

我正在使用 CSOM 检索我的全局导航。但执行起来需要一些时间。我想要的是在第一次加载页面时将 ViewModel 存储在本地存储中。

1. 我在检索 ViewModel 时没有任何问题，但我需要一些 帮助检查 View 模型是否存在/获取 View 模型/设置 View 模型正确。
2. 检查 View 模型是否已更改的最佳方法是什么？ (示例代码)

JS - 检查(未正常工作)

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

Answer 1

您可以像这样设置和获取本地存储:

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