Marked as work-in-progress (WIP). The content of this post may be unreliable or incomplete. Please check back later.
Open comments page
App Infrastructure Code:
How to make your web app installable.
truePlain JavaScript starter code to build localStorage data server. The data is automatically parsed from and converted back to JSON format upon saving.
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();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.jsRepository: 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();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();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');// 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();