SharedPreferences
An simple class to manage the loacal storage, including React like useString, useJSON and more!
Install
bun add web-shared-preferenceUsage with React
See an example
import { useEffect } from "react";
import { useLocalStorage /* useSessionStorage */ } from "web-shared-preference";
export function App() {
const [name, setName] = useLocalStorage.string("username", "");
useEffect(() => {
setName("Kevin");
}, [name]);
return <div>Hello {name}!</div>;
}Usage w/o React
import { SharedPreferences } from "web-shared-preferences";
interface Person {
name: string;
age: number;
weight: `${string}kg`;
}
class App {
private pref: SharedPreferences;
public constructor(...args: any[]) {
this.pref = new SharedPreferences();
}
// ... your usage
}
// or functional
function App() {
const pref: SharedPreferences = new SharedPreferences();
// Check if your wanted preferences are exist
if (pref.hasPref("myKey")) console.log("There is a preference named 'myKey'");
pref.setJSON<Person>("myKey", {
name: "Kevin",
age: 36,
weight: "90kg",
});
// Make it partial tp prevent runtime errors
console.log(pref.getJSON < Partial<Person>("myKey", {}));
}Documentation
I try my best
Create a new hook dispatcher for React
import { Dispatcher } from "web-shared-preference";
import { SharedPreferencesFsPollyfill } from "web-shared-preferences-fs-pollyfill";
const dispatcher = new Dispatcher(new SharedPreferencesFsPollyfill("./local.json"));
const useFsStorage = {
string: dispatcher.useString,
boolean: dispatcher.useBoolean,
number: dispatcher.useNumber,
json: dispatcher.useJSON,
};
export { useFsStorage };Setting up an FS pollyfill
const fs = require("fs");
const { SharedPreferences } = require("web-shared-preferences");
const { SharedPreferencesFsPollyfill } = require("web-shared-preferences-fs-pollyfill");
const pref = new SharedPreferences(new SharedPreferencesFsPollyfill("./test/local.json"));
pref.setString("name", "Kevin");
pref.setString("last", "Olaf");
pref.setJSON("json", {
name: "Hellow",
});
console.log(`${pref.getString("name", null)} (${pref.getString("last", "")})`);