基于本地存储更新 JS 对象

Question

我正在尝试创建一个包含所有应用程序 URL 的设置对象，但其中一些 URL 值是动态的并存储在本地存储中。我的问题是如何根据最新的本地存储更新设置对象？

HTML：

<a href="javascript:slideonlyone('addon1')">Addon 1</a>
<a href="javascript:slideonlyone('addon2')">Addon 2</a>
<a href="javascript:slideonlyone('addon3')">Addon 3</a>

Javascript：

window.localStorage.setItem('TmpAdd','default');

var AppUrl = {
    'jsonUrl1' : 'http://myurl.com/' + window.localStorage.getItem('TmpAdd'),
    'jsonUrl2' : 'http://myurl.com/category/' + window.localStorage.getItem('TmpAdd')
};

function slideonlyone(item) {
    window.localStorage.setItem('TmpAdd', item );
    console.log(window.localStorage.getItem('TmpAdd'),AppUrl.jsonUrl1);      
}

在此处查看工作示例：

http://codepen.io/anon/pen/BebvE/

Answer 1

每当您更改本地存储值时更新 URL：

var AppUrl = { };
updateURLs('default');

function updateURLs(tmpAdd) {
    window.localStorage.setItem('TmpAdd', tmpAdd);
    AppUrl.jsonUrl1 = 'http://myurl.com/' + tmpAdd;
    AppUrl.jsonUrl1 = 'http://myurl.com/category/' + tmpAdd;
}

function slideonlyone(item) {
    updateURLs(item);
    console.log(window.localStorage.getItem('TmpAdd'));
    console.log(AppUrl.jsonUrl1);
}

另一种方法是将jsonUrl1 和jsonUrl2 转换为查看localStorage.TmpAdd 的当前值并适当创建URL 的函数。您可以使用custom property getters^MDN 使函数看起来像普通属性，但这可能有点过头了。

var AppUrl = {

    'jsonUrl1' : function() {
        return 'http://myurl.com/' +
            window.localStorage.getItem('TmpAdd');
    },

    'jsonUrl2' : function() {
        return 'http://myurl.com/category/' +
            window.localStorage.getItem('TmpAdd');
    }
};

// usage: replace AppUrl.jsonUrl1 with AppUrl.jsonUrl1()