UI5ers Buzz #02: The Power of Local Storage

[annette_frei]

We introduced local storage briefly in last week’s blog post about the spiced-up shopping cart demo app. But we thought that it really deserves its own blog post considering how powerful it is and the large amounts of data it can handle.

Local storage is a neat solution if you don’t have a back end, but you still want to use functionality on your web page that involves saving and retrieving data. It also allows you to keep the state of the app after reloading a page, such as user settings or UI state.

Similar to cookies, you can use local storage independent of a temporary user session. It is persisted on the client without expiration date, so it will be stored until the user clears his cache and local files manually. Note that in a real scenario you would only store non-person related data in local storage for data privacy reasons.

In the shopping cart demo app, we have created a neat helper class called LocalStorageModel that nicely integrates into the UI5 data binding concepts. Data saving and retrieving takes place each time the local storage model is instantiated or refreshed. The actual calls are done with the put and get methods of the jQuery.sap.storage API. For example:

//Put method: 

this._storage.put(this._STORAGE_KEY, sJSON);

//Get method: 

var sJSON = this._storage.get(this._STORAGE_KEY);

You can pass initial content and settings to the constructor that will be forwarded to the JSON model base class. You can also instantiate the model with a key in case you need multiple instances storing data. For example:

new LocalStorageModel("MyStorageKey", {key: "value", array: [1,2,3,4]});

Talking about our JSON model, there’s one more important thing we need to point out: our implementation of the local storage model inherits directly from them JSON model. In case of the setProperty, setData and refresh methods, however, we needed to override the functionality in each method to call our store data function. This then saves the affected data to the local storage transparently.

Our implementation is refreshingly lean and effective as we can handle all data at once. But local storage has more complexity to offer if needed and operate on smaller pieces of data. You can use the native local storage API, which allows you to save and retrieve individual data units by means of the methods setItem, getItem and removeItem.

Curious? Great! You can try it out by downloading the shopping cart demo app from our Demo Kit page. Just click on the download button and select the "Shopping Cart" demo app to receive a zip file with the source code.

The next post of our UI5ers Buzz blog series will cover our new Shop Administration demo app.

How are we doing? Let us know by leaving a comment here or contacting us in the slack channel.

Previous Post: UI5ers Buzz #01

Talk to you soon,

Annette and Michael

Annette is a UI5 developer at SAP who loves to be creative and produce sophisticated Web front ends. Always in pursuit of the optimal user experience, she’s supporting UI5 communities, happy to share success and grateful for learning something new every day.

 

Michael is product owner at SAP and OpenUI5 enthusiast. His passion is developing awesome looking UIs and working with web technologies. He also loves getting in touch with the community and evangelizing technology. Follow him here or on @Twitter