Question

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

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

基于本地存储更新JS对象

1 个答案: