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


I don't know how it is designed to prototype javascript.


source to share

3 answers

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

    Storage.prototype.setObject = function(key, value) {
        this.setItem(key,  "ƒ"+JSON.stringify(value));
        makeDot(key, value);
     // upgrade existing object stores:   
        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 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.



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


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


By the way, I wrote rhaboo.



All Articles