LanguagesSynchronized Storage Between Multiple Computers with Chrome Sync

Synchronized Storage Between Multiple Computers with Chrome Sync

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Chrome packaged apps can load and store data in multiple ways depending on the nature of what you’re trying to store. For small amounts of key/value data, chrome.storage.local provides a capable replacement for localStorage. For data you need to be available anywhere your user logs in, chrome.storage.sync can make it happen.

Simple Application Data

Developers that are used to using localStorage in their HTML5 apps to store working data, application preferences will be disappointed to see that localStorage is not available in Chrome packaged apps.

Instead of localStorage, in a Chrome Packaged App you can choose between chrome.storage.local and chrome.storage.sync. “Chrome.storage.local” provides key/value storage similar in nature to localStorage where the data is persistently stored locally. You can close the app and when the user comes back later, it will still be there.

chrome.storage.local.set({'YourKey': 'YourValue'});

The get function is a request from storage that may not be instantaneous. For this reason getting from chrome.storage.local and chrome.storage.sync has to be done asynchronously with a callback.

chrome.storage.local.get('Other', function (obj) {
 //obj.YourKey contains "YourValue"
 });

“Chrome.storage.sync” has the same API as “local” but has one very unique property. Values stored in chrome.storage.sync will automatically be available on all of the computers linked to the same Google account across desktop computers running Chrome and Chromebooks.

Monitoring chrome.storage for Changes

Because chrome.storage can be modified by both threads running on each client computer and by remote instances of your application tied to the same Google account, it is critical to be able to monitor chrome.storage for changes.

The onChanged event is fired any time the chrome.storage.local or chrome.storage.sync is changed either locally or remotely. The object passed to your event handler contains all of the keys that are modified along with both the old value and the new value.

chrome.storage.onChanged.addListener(function(changeSet) {
  for (key in changeSet) {
  $("#OutputDIV").html(key +
  " changed from, ""+ changeSet[key].oldValue +
  "" to ""+ changeSet[key].newValue);
  }
 });

Limitations

Chrome.storage.sync runs over the network and does have limitations. Like anything that runs over the network, large chunky operations are more efficient than many small operations so it is a best practice to store objects in your chrome.storage rather than putting every key/value pair in directly.

Google also has some throttling in place to prevent apps from abusing chrome.storage.sync. This includes 102,400 bytes of maximum capacity, 4,096 bytes per item and no more than 10 write operations per minute.

The toughest one to program for is the 10 write operations per minute. For example, if your app had a sortable list that updated the object’s sort order every time a user adjusted the list, the user could easily pass 10 write operations per minute. In this scenario, you need to build some intelligence in your app to delay the write operation to batch up your changes when necessary.

About the Author:

David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories