利用Object.defineProperty 简化 Chrome插件本地存储操作

 

通常谷歌插件本地存储写法很别扭☹，如

chrome.storage.sync.get(null,function(data){

　　//todo

　　console.log(data);

}); 

如果get后需要判断内部值时，则需要套住todo代码，使得代码臃肿

 

本地存储的set方法还算方便，如

chrome.storage.sync.set(data)

 

但是每次取值时都要写一大段get语句☹，操作起来很是不便

SO，我要简化它🤔，通过简单的学习得到下面那段方法

 

先！！！，看一下调用方法😬

options.yuedu = 'close';//这里实际上已为chrome本地数据更新

 

以下方法仅操作options即可

//初始化数据对象
var options = {
    yuedu: 'open',
    bg_img: null,
};
//通过chrome原生api访问本地存储数据
chrome.storage.sync.get(null, function (data) {
    //若初次加载属性则赋默认值
    $.extend(options, data);
    //原生chrome api 设置本地存储值
    chrome.storage.sync.set(options);
　　//调用方法，并传入options对象
    observer.walk(options);
});
//利用Object.defineProperty实现对象双向绑定
var observer = {
    walk(data) {
        Object.keys(data).forEach((key) => {
            this.defineRective(data, key, data[key], callback)
        })
    },
    defineRective(vm, key, value) {
        Object.defineProperty(vm, key, {
            get: function () {
                return value;
            },
            set: function (newVal) {
                if (value != newVal) {
                    value = newVal;
                    chrome.storage.sync.set(options);
                }
            }
        })
    }
};