Skip to main content

Choosing your App's Client-Side Storage Technology

Overview​

There are several ways for Overwolf apps to store data locally in the user's computer for later retrieval when necessary. Storing data persistently enables long-term storage, back ups of save data or documents for offline use, and to retain user-specific settings for your app.

In this article, we're going to review the most popular client-side storage technologies, highlighting their usage, benefits, and drawbacks.

Cookies​

In the past, cookies were used to store various types of local information like session's id, with no real alternative. Cookies are severely limited in size and can't store too much - they are sent back and forth for every HTTP request and asset requests for Images/CSS/JavaScript files. Nowadays we have Web Storage API, IndexedDB, and a bunch of solid alternatives which are much less limited than cookies and enable you to store more types of data easily.

Restrictions of cookies​

  • Cookies can only store up to 4KB of data.
  • Cookies are private to the app. An OW app can only read the cookies it set itself, not other OW apps cookies.
  • Cookies are limited in total number (but the exact number depends on the specific browser implementation). If this number is exceeded, new cookies replace the older ones.

Cookies can be set or read server side, or client side. On the client's side, cookies are exposed by the document object as document.cookie .

Usage​

A simple JavaScript snippet to set a cookie that expires in 1 year is:

// set a cookie that expires in 1 year counted in seconds
document.cookie = 'name=OW; max-age=31536000' 

// return a string with all the cookies set for the page, semicolon separated
const cookies = document.cookie

Web Storage​

Web Storage provides a way to store key/value pairs in a user's browser.

  • Web Storage is persistent. Once a value is stored, it doesn't disappear or expire until the application or the user explicitly removes it.
  • Web Storage can handle large amounts of data. Current browsers limit total size per storage area to 5MB.
  • Web Storage doesn't depend on the server and sends no data to the server. You're free to store data locally and sync it with the server asynchronously, but Web Storage works equally well and is just as useful offline as it is online.
  • Web Storage provides four primary methods — getItem(key); setItem(key,value); removeItem(key); and clear().

Web Storage includes two different types of storage: SessionStorage and LocalStorage.

Session storage​

SessionStorage limits the scope of data saved in the current browser window to just that browser window. When used with an ecommerce application, for example, using sessionStorage to record the contents of a user's shopping cart eliminates the potential for accidental double purchases.

LocalStorage​

LocalStorage, meanwhile, persists across windows and tabs within a single browser. So, if you have the same site open in three windows in Chrome, all could all share the same localStorage container.

LocalStorage databases impose a size limit of ~50Mb (Since OW v0.161. Before, the size was 5Mb).

Usage​

Use the Web Storage API to set and get data:

localStorage.setItem( "firstname", "Wolf" );
var name = localStorage.getItem( "firstname" );

Web Storage can be used anywhere you would normally have used cookies. It provides what's perhaps the simplest way — even easier than cookies — to set and retrieve key-value pairs in a browser.

IndexedDB​

Indexed Database is an API for storing and retrieving data using an indexed, transactional database of key-value pairs on the user's computer.

IndexedDB provides faster, more sophisticated data storage and retrieval than simple key-value pair storage of the type available from Web Storage or cookies.

Benefits​

IndexedDB offers four specific benefits over Web Storage:

  • Indexed data can be searched efficiently.
  • Databases allow multiple values to be stored as a key, whereas key-value data requires each key to be unique.
  • Transactional databases offer some protection against system and application failures. If a transaction doesn't successfully complete, it can be rolled back.
  • IndexedDB databases impose no size limitations.

Usage​

All major browsers except Safari currently support IndexedDB.

Use the IndexedDB API to set and get data:

var db; // create empty variable to hold database if opening succeeds
var request = indexedDB.open("myDatabase"); //the first step is to open a database

request.onsuccess = (event) => {
  db = request.result; // if things go well, we will get the db in the `result` property of our request
}

//create an object store (which is something very much like a table)
var objectStore = db.createObjectStore("players", {keyPath: "id"}); 

objectStore.add(customerData[i]); //add data

IndexedDB is the way to go if you're building an application that needs to store structured data. Just be aware of the steep learning curve when you're getting started.

IndexedDB learning curve can be steep, but this very simple app can be a good place to start: TODO-notifications sample app

Application Cache​

The Application Cache isn't like other client-side data storage APIs listed above, but it's worth mentioning, as it's an important component in enabling offline client-side Web apps.

The Application Cache uses a cache manifest. This is a simple text document listing resources that should and shouldn't be cached, to tell the browser to download certain files, hold onto them and use the cached version rather than make a request to the server. Every major Web browser supports the Application Cache.

Read more about app cache here.

Summary​

This was a review of the different client-side storage techniques you can leverage when building Overwolf applications.

If you're still unsure about which method is best suited to your project, contact us.