Local storage

JointJS+ provides a Local plugin that enables the ability to store documents (especially JointJS graphs and cells) to client-side HTML 5 localStorage.

Installation

Access Local via the storage namespace, and utilize its three basic methods insert(), find(), and remove().

import { dia, shapes, storage } from '@joint/plus';

const graph = new dia.Graph({}, { cellNamespace: shapes });
(new shapes.standard.Rectangle).addTo(graph);

// Insert a graph into the collection 'graphs'.
storage.Local.insert('graphs', graph);
// Find all the graphs in the collection 'graphs'.
storage.Local.find('graphs', {}, (err, graphs) => {});
// Find a graph with ID 'mygraph' in the collection 'graphs'.
storage.Local.find('graphs', { id: 'mygraph' }, (err, graphs) => {});
// Remove all the graphs from the collection 'graphs'.
storage.Local.remove('graphs', {}, (err) => {});
// Remove a graph from the collection 'graphs'.
storage.Local.remove('graphs', { id: 'mygraph' }, (err) => {});

There is also a UMD version available

Include joint.storage.local.js in your HTML:

index.html

<script src="joint.js"></script>
<script src="joint.storage.local.js"></script>

Access Local through the joint.storage namespace:

index.js

const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
(new joint.shapes.standard.Rectangle).addTo(graph);

// Insert a graph into the collection 'graphs'.
joint.storage.Local.insert('graphs', graph);
// Find all the graphs in the collection 'graphs'.
joint.storage.Local.find('graphs', {}, (err, graphs) => {});
// Find a graph with ID 'mygraph' in the collection 'graphs'.
joint.storage.Local.find('graphs', { id: 'mygraph' }, (err, graphs) => {});
// Remove all the graphs from the collection 'graphs'.
joint.storage.Local.remove('graphs', {}, (err) => {});
// Remove a graph from the collection 'graphs'.
joint.storage.Local.remove('graphs', { id: 'mygraph' }, (err) => {});

How does Local work?

Taking advantage of client-side HTML 5 localStorage allows you to store data in the browser similar to cookies, but with a greatly enhanced capacity and no information stored in the HTTP request header.

The standard HTML 5 localStorage is a simple key-value store where both keys and values are strings. Therefore, it is on the programmer to invent a way of storing and retrieving more complex data structures. storage.Local makes this abstraction for you and its API, though overly simplified, resembles APIs for common NoSQL document object stores such as MongoDB.

storage.Local is a singleton object with three basic methods: insert(), find() and remove(). It behaves like a single database with collections of objects. You can add, remove and search objects in each collection. Objects can be any JavaScript objects or JointJS elements, links or graphs.

Currently, storage.Local indexes objects in collections by their IDs only. It is important to note that all the methods are asynchronous. This means that the callback is deferred until the current JavaScript call stack has cleared (similar to setTimeout with a delay of 0). This is because we want to keep the API similar to other NoSQL databases, so if you later decide to store your documents in e.g. MongoDB instead, you don't have to make drastic changes to your application. Instead, you can just write a simple replacement for storage.Local, and store your documents e.g. via AJAX on the server.