36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
/**
|
|
* This function should be called from a Vue component's "created" hook
|
|
* It will initialise a list of properties from local storage.
|
|
* It then sets up watchers for said properties to sync them back
|
|
* so that next time we load, the values persist.
|
|
*
|
|
* Arguments:
|
|
* keyName: a string, used as the key in local storage
|
|
* syncedObject: the object whose data you want to sync (usually `this`)
|
|
* syncedData: an object, the keys of which set the properties to be synced
|
|
*/
|
|
export function syncDataWithLocalStorage(keyName, syncedObject, syncedData) {
|
|
const syncedKeys = Object.keys(syncedData);
|
|
// First, we try to retrieve the stored data
|
|
const storedString = localStorage.getItem(keyName);
|
|
if (storedString) {
|
|
const storedValues = JSON.parse(storedString);
|
|
for (const item of syncedKeys) {
|
|
if (item in storedValues) syncedObject[item] = storedValues[item];
|
|
}
|
|
}
|
|
|
|
// This function will update local storage with current values
|
|
let updateStoredValues = function() {
|
|
let newData = {};
|
|
for (const item of syncedKeys) {
|
|
newData[item] = syncedObject[item];
|
|
}
|
|
localStorage.setItem(keyName, JSON.stringify(newData));
|
|
};
|
|
|
|
// Now, set up watchers to update local storage when things change
|
|
for (const item of syncedKeys) {
|
|
syncedObject.$watch(item, updateStoredValues, { deep: true });
|
|
}
|
|
}
|