Quick Start

All Documentation

Installation

Nothing fancy here. Just include Tripod.js on your page.

Ideally, it should be included just before the closing body tag in your document. If not, it's cool. Tripod can deal.

New it Up and Add Some Data

var tripod = new Tripod();
tripod.set('who', 'world');

var tripod = new Tripod({ who: 'world' });
tripod.push('who');

push() manually pushes your data to all bound DOM nodes. set() performs a push() for you.

Add a Binding Attribute to Your Markup

<body>
	...
	<p>Hello, <span data-bound-to="who"></span>!</p>
	...
</body>

Persisting to LocalStorage (Three-way data binding FTW!)

To save the data to LocalStorage and automatically sync across tabs, we need to make two small changes to our Javascript:

var tripod = new Tripod({ who: 'world' }, '', true);
tripod.sync('who');

First, we have to pass true as the third argument to our constructor. This tells Tripod to sync changes to LocalStorage.

Second, we use sync() rather than push() to move our data around. sync() first calls load() to grab data from LocalStorage.

In this basic example, we passed an empty string '' as the namespace, which means no namespace. In your code, you'll want to include a namespace when storing data in LocalStorage to help prevent collisions.