This content originally appeared on DEV Community and was authored by Natserract
Called localStorageObserver this is a simple storage library for JavaScript, get inspire from localForage but running as Observer. This library support TypeScript, and EasyTo-Use.
Problems why created this library:
window.addEventListener('storage', () => {})
This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects. https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
How to use
To use localStorageObserver, just drop a single line into your app:
import localStorageObserver from 'local-storage-observer'
See more real example.
Download the latest localStorageObserver from GitHub, or install with npm:
npm install local-storage-observer
Configuration
You can set several configuration with the config() method. Avalaible options description, storeName, and version (use for future, currently isn't some affect in your app).
Example:
localStorageObserver.config({
storeName: 'local_storage_observer',
})
Note: you must call config() before you interact with your data. This means calling config() before using get$(), or set$().
Get Item
Gets an item from the local storage and supplies the result to a subscriber. If the key does not exist, get\$() will return null.
localStorageObserver.get$(key).subscribe((next) => {
console.log('Result', JSON.parse(next))
})
Note: localStorageObserver doesn't store the value null / undefined.
Set Item
Saves data to local storage.
localStorageObserver.set$(key, values).subscribe((next) => {
console.log('Step two, set$', next)
})
You can store the following types of JavaScript objects:
ArrayStringNumberObject
Remove Item
Removes the value of a key from the local storage.
localStorageObserver.remove$(key).subscribe({
next: (message) => console.log('Message: ', message),
error: (error) => console.error('Error: ', error),
})
Clear Item
Removes the value of a key from the local storage.
localStorageObserver.clear$().subscribe((message) => {
console.log('Message: ', message)
})
Unsubscribe
Cleanup a subscription
useEffect(() => {
...
return () => {
localStorageObserver.destroySubscription$()
}
}, [])
Install package on: https://www.npmjs.com/package/local-storage-observer
This content originally appeared on DEV Community and was authored by Natserract
Natserract | Sciencx (2021-11-14T15:47:56+00:00) Local Storage Running in Observer. Retrieved from https://www.scien.cx/2021/11/14/local-storage-running-in-observer/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.