基于本地存储更新JS对象

Update JS object based on local storeage

本文关键字：JS 对象 更新 存储 于本地      更新时间：2023-09-26

我正试图创建一个包含所有应用程序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/

无论何时更改本地存储值，都会更新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的函数。通过使用自定义属性gettersMDN，可以使函数看起来像普通属性，但这可能有些过头了。

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()
相关文章：