Working with local storage as with an object - Continued

With this post, I would like to improve and suggest an adequate way to work with the repository, as with an object. Code from the post “ Working with local storage, as with an object? Easy! "I highly recommend not to use, everything is bad there (the disadvantages are set out below). The purpose of this - to explain to all those who added an article on the link to favorites or put a plus sign, never use this code .

Now I want to demonstrate the simplest idea suggested by Scalar in the commentary .

When the page loads (even before the DOM tree readiness event), we access the repository (in this case, it is localStorage and sessionStorage), get JSON, deserialize it and put it into some variable.

localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2} 

Then, every N milliseconds, perform the reverse process:

 localStorage.setItem( '_myStorage', JSON.stringify( localObject ) ); 

At the onbeforeunload event, do the same.
')
The implementation of the idea is simple (the level of complexity of the task is low and even a beginner is available). But, not everyone (including me) thought of that before.


Using:

 var storage = new ObjectStorage; storage.local = {a:4, b: {c:5}}; storage.session = {a:7, b: {c:8}}; b = storage.local.b; bc = {d:6}; 

Reload page,

 var storage = new ObjectStorage; console.log( storage ); /* { _name: ..., duration: ..., local: {a:4, b: {c: {d: 6}}}, session: {a:7, b: {c :8}} } */ 

Alternatively, when you call the ObjectStorage constructor, you can pass two arguments: name - the name of the key in the repository and duration - the interval for storing data in localStorage.

 new ObjectStorage( '_myStorage', 1000 ); 

You can leave the name standard:

 new ObjectStorage( null, 1000 ); 

And you can change the duration after initialization:

 var storage = new ObjectStorage; storage.duration = 2000; 

(you can change storage._name, but this is not recommended, I even put a wand, like a private property :))

Pros, compared with the decision on the link at the beginning of this article:

• Performance: there are no getters, no need to pull the vault every time you call the key.
• Compactness.
• You can work as with a regular object:
  

   storage.local = {a:{}} storage.local.ab = 5; //  a = storage.local.a; ab = 5; //    

• Embedded solution for sessionStorage.

Common cons:

• If the browser closes incorrectly (BSOD, power outage, etc.), you can lose (oh gods!) The work for the last M seconds (by default, five). No matter how hard I tried to invent a scenario where this moment is critical, I could not.

Of good.