javascript - HTML5 localStorage JSON 改进

Question

以下代码来自Mr. Guria's answer .

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}

这是一个巧妙的解决方案。如何针对“点符号”改进此解决方案？

例如

我的存储对象

var user = { "name":"testName", "surname":"testSurname" };
localStorage.setObject("user", user);

我的目的是通过这种方式获取name内容

   var name = localStorage.user.name;

不知道javascript原型(prototype)是怎么开发的。

Answer 1

由于您有一个 setter，因此您可以充分控制商店来创建您的行为。由于存储了键/值，我们可以在启动时查找上次的值，并透明地升级它们(如果需要)。使用 setObject() 和 setItem() 的一个好处是我们重新定义的属性不会妨碍重新设置新值。 v

我仍然认为这可能会导致与使用 localStorage 的其他应用程序发生冲突，并且它将“ƒ”字符保留为特殊字符，但是如果您每次都使用 setObject() 方法来保存对象，则以下方法效果很好:

(function() {

    function makeDot(key, value){            
        Object.defineProperty(localStorage, key, {
            configurable: true,
            enumerable: true,
              get: function() {
                  return typeof value==="string" && value.slice(0,1)==="ƒ" ? 
                       JSON.parse(value.slice(1)) : 
                       value;
             }
        });
    }

    Storage.prototype.setObject = function(key, value) {
        this.setItem(key,  "ƒ"+JSON.stringify(value));
        makeDot(key, value);
    }
     // upgrade existing object stores:   
    Object.keys(localStorage).forEach(function(a){
        var v=localStorage[a];
        if(typeof v==="string" && v.slice(0,1)==="ƒ"){
               makeDot(a, v);    
        }
    });


}());


var user = {
    "name": "testName",
    "surname": "testSurname"
};

localStorage.setObject("user", user); //save object

alert( localStorage.user.surname ); // shows: "testSurname"

参见 http://jsfiddle.net/hrepekbb/踢轮胎

如果你想用点符号设置对象，那么你需要使用一个观察者或者代理来反射(reflect) localStorage，但是这些选项都还没有准备好迎接黄金时段。