Improving JSON HTML5 Local Storage
The following code is Mr. Guria answers .
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);
}
This is a smart decision. How can I improve this solution for "dot notation"?
for example
My saved object
var user = { "name":"testName", "surname":"testSurname" };
localStorage.setObject("user", user);
My goal is to get the contents of the names this way
var name = localStorage.user.name;
I don't know how it is designed to prototype javascript.
source to share
Since you have a setter, this gives you enough control over the stores to create your behavior. Since the key / values are stored, we can look up the last time values on load and update them transparently (if needed). One good idea about using setObject () and setItem () is that our overridden properties don't get in the way of overriding new values. v
I still think this can cause conflicts with other applications using localStorage and stores "ƒ" char as special, but if you use your setObject () method every time to save objects, then it works well:
(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"
see http://jsfiddle.net/hrepekbb/ to drop tires
if you want to set objects using dot notation then you need to use an observer or perhaps proxies reflecting localStorage, but neither of those options are ready for prime time yet.
source to share
You can not. The stored values from localStorage
are always JSON strings. localStorage.getObject("user").name
is the best you can do.
You can configure a property with an accessor descriptor to act like a "proxy" property. A proxy property like this displays the stored value, but you need to do this for each value that you wanted to access.
Object.defineProperty(localStorage, "user", {
get: function() { return localStorage.getObject("realUserKey"); },
set: function(v) { localStorage.setObject("realUserKey", v); }
});
Here the value is realUserKey
localStorage
set and stored, but the value is transparently available from the property user
. Note that this setting is not saved, and require re-declaration of each page load, as well as the functions getObject
and setObject
.
To recap: There is no way to generalize this strategy to arbitrary key values (not until the ES6 standard leaves development and sees deployments in browsers). You must declare each "proxy" property explicitly.
source to share
http://rhaboo.org does the following:
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);
By the way, I wrote rhaboo.
source to share