-
Notifications
You must be signed in to change notification settings - Fork 40
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
can we use indexedb? #81
Comments
Here is a example how you could use indexDB: import React from "react";
import ReactDOM from "react-dom/client";
import { atom, RecoilRoot, useRecoilState } from "recoil";
import { recoilPersist } from "recoil-persist";
const getIndexDBStorage = async () => {
const openConnection = async () => {
return new Promise((resolve, reject) => {
const DBOpenRequest = window.indexedDB.open("recoil-persist");
DBOpenRequest.onerror = () => reject("Error open database");
DBOpenRequest.onsuccess = (event) => {
resolve(event.target.result);
};
DBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore("recoil-persist");
};
});
};
const database = await openConnection();
const storage = {
setItem: (key, value) => {
if (database === undefined) {
return;
}
return new Promise((resolve, reject) => {
const putRequest = database
.transaction(["recoil-persist"], "readwrite")
.objectStore("recoil-persist")
.put(value, key);
putRequest.onsuccess = () => {
resolve();
};
putRequest.onerror = () => {
reject();
};
});
},
getItem: (key) => {
if (database === undefined) {
return;
}
return new Promise((resolve, reject) => {
const result = database
.transaction(["recoil-persist"], "readwrite")
.objectStore("recoil-persist")
.get(key);
result.onsuccess = (event) => {
resolve(event.target.result);
};
result.onerror = () => {
reject();
};
});
},
};
return storage;
};
const { persistAtom } = recoilPersist({
storage: await getIndexDBStorage(),
});
const counterState = atom({
key: "count",
default: 0,
effects_UNSTABLE: [persistAtom],
});
function App() {
const [count, setCount] = useRecoilState(counterState);
return (
<div>
<h3>Counter: {count}</h3>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<RecoilRoot>
<App />
</RecoilRoot>
</React.StrictMode>
); |
nice! going to give it a go ;) |
this works! thank you so much, Converted it to typescript: const getIndexDBStorage = async () => {
const openConnection = async () => {
return new Promise<IDBDatabase>((resolve, reject) => {
const DBOpenRequest = window.indexedDB.open("recoil-persist");
DBOpenRequest.onerror = () => reject("Error open database");
DBOpenRequest.onsuccess = () => {
resolve(DBOpenRequest.result as IDBDatabase);
};
DBOpenRequest.onupgradeneeded = () => {
const db = DBOpenRequest.result as IDBDatabase;
db.createObjectStore("recoil-persist");
};
});
};
const database = await openConnection();
const storage = {
setItem: (key: string, value: any) => {
if (database === undefined) {
return;
}
return new Promise<void>((resolve, reject) => {
const putRequest = database
.transaction(["recoil-persist"], "readwrite")
.objectStore("recoil-persist")
.put(value, key);
putRequest.onsuccess = () => {
resolve();
};
putRequest.onerror = () => {
reject();
};
});
},
getItem: (key: string): string | Promise<string> | null => {
if (database === undefined) {
return null;
}
return new Promise<string>((resolve, reject) => {
const result = database
.transaction(["recoil-persist"], "readwrite")
.objectStore("recoil-persist")
.get(key);
result.onsuccess = () => {
resolve(result.result);
};
result.onerror = () => {
reject();
};
});
},
};
return storage;
};
export default getIndexDBStorage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can we use indexDB instead of localStorage? There is an issue in latest electron wrapper that clears localStorage when the app closes...
The text was updated successfully, but these errors were encountered: