vue-persistent-storage-manager/dist/index.mjs

Vue plugin that wraps the StorageManager API and provides the state of the persistent-storage permission alongside a storage estimate.

import Vue from "vue";

//#region src/index.ts
const defaultOptions = { watchStorage: false };
/**
* Wrapper for the StorageManager API. Provides the state of the persistent-storage permission alongside a storage estimate.
*/
var VuePersistentStorageManager = class VuePersistentStorageManager {
	/**
	* Indicates that the StorageManager API is available.
	*/
	isAvailable = typeof navigator !== "undefined" && navigator?.storage?.persist !== void 0;
	/**
	* Contains storage quota and usage information.
	*/
	storageEstimate = {};
	_isPersistent = false;
	/**
	* Installs a VuePersistentStorageManager as a Vue plugin.
	*/
	static install = (_Vue, options) => {
		const pluginOptions = {
			...defaultOptions,
			...options
		};
		const storageManager = Vue.observable(new VuePersistentStorageManager());
		if (pluginOptions.watchStorage) storageManager._modifyLocalStorageFunctions();
		_Vue.prototype.$storageManager = storageManager;
		_Vue.prototype.$storageEstimate = storageManager.storageEstimate;
	};
	/**
	* Creates a new VuePersistentStorageManager instance.
	*/
	constructor() {
		if (!this.isAvailable) return;
		this._refreshIsPersistent();
		this._refreshStorageEstimate();
		navigator.permissions?.query({ name: "persistent-storage" })?.then((persistentStoragePermission) => {
			persistentStoragePermission.onchange = () => this._refreshIsPersistent();
		});
		window.addEventListener("storage", () => {
			this._refreshStorageEstimate();
		});
	}
	/**
	* Indicates that persistence of localStorage has been granted.
	*/
	get isPersistent() {
		return this._isPersistent;
	}
	/**
	* Requests persistence of localStorage.
	* @returns a Promise that resolves to true if permission has been granted.
	*/
	requestPersistentStorage() {
		if (!this.isAvailable) return Promise.resolve(false);
		return navigator.storage.persist().then((persisted) => {
			this._isPersistent = persisted;
			return persisted;
		});
	}
	_refreshIsPersistent() {
		navigator.storage.persisted().then((persisted) => this._isPersistent = persisted);
	}
	_refreshStorageEstimate() {
		navigator.storage.estimate().then(({ quota, usage }) => {
			Vue.set(this.storageEstimate, "quota", quota);
			Vue.set(this.storageEstimate, "usage", usage);
		});
	}
	_modifyLocalStorageFunctions() {
		if (typeof localStorage === "undefined") return;
		const self = this;
		if (typeof localStorage.originalSetItem === "undefined") localStorage.originalSetItem = localStorage.setItem;
		const setItem = localStorage.setItem;
		localStorage.setItem = function(...args) {
			setItem.apply(this, args);
			self._refreshStorageEstimate();
		};
		if (typeof localStorage.originalRemoveItem === "undefined") localStorage.originalRemoveItem = localStorage.removeItem;
		const removeItem = localStorage.removeItem;
		localStorage.removeItem = function(...args) {
			removeItem.apply(this, args);
			self._refreshStorageEstimate();
		};
	}
};

//#endregion
export { VuePersistentStorageManager };
//# sourceMappingURL=index.mjs.map