Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/macfja/svelte-persistent-store
A Svelte store that keep its value through pages and reloads
https://github.com/macfja/svelte-persistent-store
cookie indexeddb localstorage sessionstorage storages store svelte sveltejs
Last synced: 7 days ago
JSON representation
A Svelte store that keep its value through pages and reloads
- Host: GitHub
- URL: https://github.com/macfja/svelte-persistent-store
- Owner: MacFJA
- License: mit
- Created: 2021-02-27T18:25:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-15T10:33:01.000Z (12 months ago)
- Last Synced: 2024-09-22T14:32:41.989Z (11 days ago)
- Topics: cookie, indexeddb, localstorage, sessionstorage, storages, store, svelte, sveltejs
- Language: TypeScript
- Homepage:
- Size: 694 KB
- Stars: 243
- Watchers: 4
- Forks: 14
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Svelte Persistent store
A Svelte store that keep its value through pages and reloads
## Installation
```
npm install @macfja/svelte-persistent-store
```
## Usage
```javascript
import { persist, createLocalStorage } from "@macfja/svelte-persistent-store"
import { writable } from "svelte/store"
let name = persist(writable("John"), createLocalStorage(), "name")
$name = "Jeanne Doe"
// if you reload the page the value of $name is 'Jeanne Doe'
```
```javascript
import { persistBrowserSession } from "@macfja/svelte-persistent-store"
import { writable } from "svelte/store"
let title = persistBrowserSession(writable("Unsaved"), "document-name")
$title = "My Document"
// if you reload the page the value of $title is 'My Document'
```
```javascript
import { writable } from "@macfja/svelte-persistent-store"
// Create a wriatble store, persisted in browser LocalStorage, with the key `name`
let name = writable("name", "John")
$name = "Jeanne Doe"
// if you reload the page the value of $name is 'Jeanne Doe'
```
## Features
- Multiple storages (Allow to have the best suited usage depending on your use case)
- Work with any Svelte store
- Work with classes, objects, primitive
## Storages
There are 6 storages built-in:
- `createLocalStorage()`, that use `window.localStorage` to save values
- `createSessionStorage()`, that use `window.sessionStorage` to save values
- `createCookieStorage()`, that use `document.cookie` to save values
- `createIndexedDBStorage()`, that use `window.indexedDB` to save value
- `createChromeStorage()`, that use `chrome.storage` to save values
- `createEncryptedStorage()`, that wrap a storage to encrypt data (and key)
You can add more storages, you just need to implement the interface `StorageInterface`
## Documentation
Documentation and examples can be generated with `npm run doc`, next open `docs/index.html` with your favorite web browser.
(Hint: If you don't want to generate the docs, a part of the example and documentation are available [here](.docs/README.md))
### Types
The persist function will return a new Store with type `PersistentStore`.
The full signature of `persist` is:
```typescript
declare function persist(store: Writable, storage: StorageInterface, key: string): PersistentStore
```
The persist function add a `delete` function on the store.
More information about types can be found in the generated `types/index.d.ts` (`npm run prebuild`) or in the generated documentation (`npm run doc`).
## Backwards Compatibility Break
### `1.3.0` to `2.0.0`
Data persisted in version `1.3.0` may not be deserializable with version `2.*`.
If you have persisted store that contains Javascript class with version `1.3.0` of `@macfja/svelte-persistent-store` you will not be able to get the data by default.
This is due to a change of data serialization. More information [here](.docs/How-To/06-Change-Serialization.md)
## Contributing
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Read more in the [Contributing file](CONTRIBUTING.md)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.