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

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

   var name = localStorage.user.name;

我不知道它是如何开发javascript原型的。

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/查看轮胎

如果你想用点符号设置对象，那么你需要使用一个观察者或者反映localStorage的代理，但这些选项都没有为黄金时段做好准备。

Answer 2

你不能。来自localStorage的存储值始终是JSON字符串。 localStorage.getObject("user").name是你能做的最好的事情。

您可以设置一个带有访问描述符的属性来代理＆＃34;代理＆＃34;属性。这样的代理属性映射到存储的值，但您需要为要访问的每个值执行此操作。

Object.defineProperty(localStorage, "user", {
    get: function() { return localStorage.getObject("realUserKey"); },
    set: function(v) { localStorage.setObject("realUserKey", v); }
});

此处，realUserKey的{{1}}值正在设置并保留，但可以从localStorage属性透明地访问该值。请注意，此设置不会持久存在，需要在每个页面加载时重新声明，就像user和getObject函数一样。

重申：没有办法将此策略概括为任意键值（直到ES6标准退出开发并在浏览器中进行部署）。您必须声明每个＆＃34;代理＆＃34;属性明确。

Answer 3

http://rhaboo.org执行以下操作：

var store = Rhaboo.persistent('Some name, any name');
if (!store.user)
  store.write('user', { name:'John', surname:'Smith' } );
store.user.write('phone', '0123 456789');
store.user.write('visited', new Date());
console.log(store.user.name);

BTW，我写了rhaboo。

HTML5 localStorage JSON改进

例如

3 个答案: