html5 localstorage

LocalStorage with Store.js

  • Sharebar

To use or not to use LocalStorage with Store.js

You may remember that not so long ago we tried using local storage to improve magento’s speed and while this approach is particulary useful, it inherits some of the same problems you would encounter when using LocalStorage for everything else that is: how do I store something other than strings?

As you may recall:

storage.setItem("user_data", {name:"Luis Tineo", nationality:"Dominican"});
console.log (storage.getItem('user_data'));

Will output something like:

"[Object Object]"

Which is not really what we saved in the beginning. So you had to cast any data to string in order to save the data you wanted in LocalStorage.

Soo we know that… why are we reading this?

A little story first. Recently we came across a couple of instances where varnish and nginx weren’t being the happy marriage I had hoped and seen for a couple of months. Varnish was displaying the wrong data across the board while nginx was using more memory than usual because the traffic hitting the web nodes were more than it was expected.

I have nginx configured to use as the minimum spare servers and as little memory as possible because I expect the responses to be quite fast, which in this case was not happening.

A couple of hours of troubleshooting revealed that the cookies being created for each individual user was not being sent correctly to the browser on some cached pages and it also happened that when it did it was getting corrupted. I never really figured out why this was happening but I knew I could do better. I knew I could simply remove all the cookies in varnish and rely in the user side to validate all of the information.

So the reason we are reading about Local Storage and how it can be used with Varnish to help you speed up your magento store is simple: We need something more reliable and more sophisticated that a simple cookie. That didn’t require us having to rewrite a whole lot to manage saving and retrieving JSON objects to and from Local Storage or that added a more complex layer to our infrastructure or overcomplicated the JavaScript used to handle the “varnish” cookies, something powerful enough that I could blindly rely on it without needing months of training.

I got you, what did you decide to do?

After looking at a few APIs I decided on Store.js, because it was defined as:

store.js exposes a simple API for cross browser local storage

And there were not joking when they said simple API however they left out the words “powerful and full featured” out of the definition

Here is a little video that explains it quite nicely why you should consider using it

But here is the most important reason why I am personally using it: it supports IE6 and up. In other words with this API now I don’t have to worry about using cookies with varnish because now even the most hated browser on earth will be OK with “Local Storage” as you can store all of the information you want to show the user. For IE6 and IE7 it really doesn’t use LocalStorage but UserData

I know you don’t care about IE6, neither do I but some customers still don’t have the chance to upgrade their browser. But putting that aside, wouldn’t be great if you could still offer the same “awesomeness” to all users that store.js supports?

This is one of the many reasons why I am recommending to use LocalStorage with Store.js so we can offer a more streamlined experience for all customers independently of their browser and focus more in improving the overall user experience. There is another reason which has to do with responsive design but that would be another post.

Another very important reason why I want to use LocalStorage with Store.js is to simply remove all of the weird cookies that travel back and forth over the network adding more overhead to the requests and responses. After all we want to make the sites as fast as possible.

Currently we will be migrating all of our cookie based varnish implementations to use LocalStorage to avoid possible conflicts with the browsers cookie limit when customers use way too many remarketing scripts and while having more space available to store data that could help us deliver faster content to the users.

Ok… so what did you really do?

First I got rid of all of the cookies in Varnish. After that I started injecting JavaScript on all cacheable pages to retrieve the LocalStorage we “set”. I injected some JavaScript code in the cart when updating items, on logout and when placing an order to set or clear the LocalStorage.

My code looks something similar to this:

On all cacheable pages

//verify that store.js is enabled
if (store.enabled){
    var user_data = store.get('user_data');
    //modify the cart value
    if (user_data.items > 0){
     cart_widget.update(user_data.items);
    }
}else{
    //ajax logging and notification configured as a magento module - page is a js variable 
    ajax_log_notify.send_email("Store.js not enabled in "+ page);
}

On the cart page:

if (store.enabled){
   //get the data - if not an empty object is returned
   var user_data = store.get('user_data');
   user_data.items = cart_items; //cart_items is rendered in the page as a js variable
   //update the data
    store.set('user_data',user_data);
}else{
    //ajax logging and notification configured as a magento module - page is a js variable 
    ajax_log_notify.send_email("Store.js not enabled in "+ page);
}

On the success page:

if (store.enabled){
   //clear the user data variable
   store.remove('user_data');
}else{
    //ajax logging and notification configured as a magento module - page is a js variable 
    ajax_log_notify.send_email("Store.js not enabled in "+ page);
}

On the login page:

if (store.enabled){
   //get the data - if not an empty object is returned
   var user_data = store.get('user_data');
   user_data.is_loggedIn = true; //cart_items is rendered in the page as a js variable
   user_data.name = name; //name is the current username rendered in the page
   user_data.sid = sid; //sid is the session id rendered in the page for security purposes
   //update the data
    store.set('user_data',user_data);
}else{
    //ajax logging and notification configured as a magento module - page is a js variable 
    ajax_log_notify.send_email("Store.js not enabled in "+ page);
}

On the logout page:

if (store.enabled){
   //get the data - if not an empty object is returned
   var user_data = store.get('user_data');
   user_data.is_loggedIn = false; //cart_items is rendered in the page as a js variable
   user_data.name = ''; //name is the set to empty
   user_data.sid = false; //sid is to false
   //update the data
    store.set('user_data',user_data);
}else{
    //ajax logging and notification configured as a magento module - page is a js variable 
    ajax_log_notify.send_email("Store.js not enabled in "+ page);
}

Note that for the sake of simplicity I stripped down the code so be careful when implementing this in production because you may need a more in depth implementation.

This really didn’t add any noticeable performance improvement to the site but it did fix my cookies problems and varnish and nginx went back being the perfect marriage so I am happy icon biggrin LocalStorage with Store.js

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)
LocalStorage with Store.js, 10.0 out of 10 based on 2 ratings
 LocalStorage with Store.js

About Luis Tineo

Husband, Father, performance improvement junkie, biker and video gamer, Linux user and in my day job I'm a Systems Architect at Blue Acorn.

Tags: , , , , ,

  • http://www.magentodevelopments.com/magento-development.php magento development

    So that is excellent, we can use material to turn pictures into Details URL and protect in localStorage. Then it becomes a bit interesting, and we will need to
    use:
    1. XMLHttpRequest Level 2
    2. Blob
    3. FileReader
    The main technique is:
    1. Do an XMLHttpRequest for a details information pc file, and set the responseType to “arraybuffer”
    2. Load the response, i.e. pc details pc file, of the XMLHttpRequest into a Blob
    3. Use FileReader to research that pc details pc file and complete it into the website
    and/or localStorage

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)