localStorage Data Server

Plain JavaScript starter code to build localStorage data server. The data is automatically parsed from and converted back to JSON format upon saving.

Usage Overview

Let's say we're building a to-do list app. We will store user preferences and to-do items.

The following code will create a new data server with localStorage key todos:data and app-preferences:data:

let servTodos = new TodoStorage('todos');
let servPreferences = new AppPreferencesStorage('app-preferences');

To read/write data, we access the server's data object directly:

// add a todo item
servTodos.data.push({
  id: Date.now(),
  title: 'Water plants at 7:00 AM',
});

// update app preferences
servPreferences.data.isDarkTheme = true;

To store the data into localStorage, we invoke Save() method on each data server:

servTodos.Save();
servPreferences.Save();

Takeaway Code

js/infrastructure/models/localstorage-wrapper.js

Script tag:

<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@daf6f50/js/infrastructure/models/localstorage-wrapper.js"></script>

CDN:

https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@daf6f50/js/infrastructure/models/localstorage-wrapper.js

Repository: localstorage-wrapper.js (v2.1)

js/application/servers.js

class AppPreferences {
	constructor() {
		this.isDarkTheme = false;
	}
}

/** @extends LocalStorageWrapper<AppPreferences> */
class AppPreferencesStorage extends LocalStorageWrapper {
	constructor(prefix) {
		super(prefix);
		this.Restore();
	}

	SetDefaultData() {
		this.data = new AppPreferences();
	}
}


// # servers

let servPreferences = new AppPreferencesStorage('app-preferences');

// set app preferences data
// servPreferences.data.isDarkTheme = true;

// save changes to localStorage
// servPreferences.Save();

// remove from local storage and reset default data
// servPreferences.Clear();

Explanation

Let's say we want to store a user preferences data. First, define the type of app preferences. We declare a class so that we can reset the data to its default value later on.

js/application/servers.js

class AppPreferences {
	constructor() {
		this.isDarkTheme = false;
	}
}

Next, extend the LocalStorageWrapper class with our AppPreferences as type. We use JSDoc comment for types.

/** @extends LocalStorageWrapper<AppPreferences> */
class AppPreferencesStorage extends LocalStorageWrapper {
	constructor(prefix) {
		super(prefix);
		this.Restore();
	}

	SetDefaultData() {
		this.data = new AppPreferences();
	}
}

We need to manually invoke the Restore() method on intialization. The LocalStorageWrapper doesn't automatically read and restore the data from localStorage on application load, because one might want to process the value before restoring.

Next, we override the SetDefaultData() to set the default value when the data server is initialized or cleared.

Finally, initialize the localStorage data server with our AppPreferencesStorage class. The first argument is the storage key prefix:

let servPreferences = new AppPreferencesStorage('app-preferences');

The data is then accessible through data property:

console.log(servPreferences.data.isDarkTheme);

To save and clear/reset the data, use the following:

// save changes to localStorage
servPreferences.Save();

// remove from local storage and reset default data
// servPreferences.Clear();

Array Data Example

For array data, we use JSDoc @typedef to define the item's type.

/**
 * @typedef {Object} TodoItem
 * @property {number} id
 * @property {string} title
 */

Next, extend the LocalStorageWrapper class with TodoItem[] as type. For array items, we simply set the default data to an empty array.

/** @extends LocalStorageWrapper<TodoItem[]> */
class TodoStorage extends LocalStorageWrapper {
	constructor(prefix) {
		super(prefix);
		this.Restore();
	}

	SetDefaultData() {
		this.data = [];
	}
}

Finally, initialize the data server:

let servTodos = new TodoStorage('todos');

Usage

// add an item
servTodos.data.push({
  id: Date.now(),
  title: 'Water plants at 7:00 AM',
});

// save changes to localStorage
servTodos.Save();

// remove from local storage and reset default data, i.e. empty array []
// servTodos.Clear();