Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SeregPie/VueStorage
Allows the components to save and load their data across the browser sessions.
https://github.com/SeregPie/VueStorage
Last synced: about 2 months ago
JSON representation
Allows the components to save and load their data across the browser sessions.
- Host: GitHub
- URL: https://github.com/SeregPie/VueStorage
- Owner: SeregPie
- License: mit
- Created: 2017-09-05T14:19:41.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2021-06-14T19:29:06.000Z (over 3 years ago)
- Last Synced: 2024-07-11T21:42:29.982Z (2 months ago)
- Language: JavaScript
- Homepage: https://seregpie.github.io/VueStorage/
- Size: 59.6 KB
- Stars: 52
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueStorage
Allows the components to save and load their data across the browser sessions.
Works for Vue 2 & 3.
## demo
[Try it out!](https://seregpie.github.io/VueStorage/)
## dependencies
- [VueDemi](https://github.com/antfu/vue-demi)
## setup
### npm
```shell
npm i @seregpie/vue-storage
npm i @vue/composition-api # if using Vue 2
```
---
```javascript
import VueStorage, {
localStorage,
sessionStorage,
stored,
} from '@seregpie/vue-storage';
```
### browser
```html
```
The plugin is globally available as `VueStorage`.
## usage
### Composition API
```javascript
import {stored} from '@seregpie/vue-storage';
export default {
props: {
userId: Number,
userName: String,
},
setup(props) {
let displayedUserName = stored(
() => `myAwesomeApp/users/${props.userId}/name`,
{
type: String,
default: () => props.userName,
},
);
return {
displayedUserName,
};
},
};
```
### Options API
Install the plugin.
```javascript
import {createApp} from 'vue'
import VueStorage from '@seregpie/vue-storage';
let app = createApp({/*...*/});
app.use(VueStorage, {
prefix: 'myAwesomeApp/',
});
app.mount('body');
```
Define the options.
```javascript
export default {
props: {
userId: Number,
userName: String,
},
stored: {
displayedUserName: {
key() {
return `users/${this.userId}/name`;
},
type: String,
default() {
return this.userName;
},
},
},
};
```
---
If the `key` option is omitted, the property name is used instead.
```javascript
stored: {
backgroundColor: {
type: String,
default: '#fff',
},
},
```
## plugin options
```
app.use(VueStorage, {
optionName: 'stored',
prefix: '',
})
```
| argument | description |
| ---: | :--- |
| `optionName` | A string as the name of the component option that contains all the stored properties. |
| `prefix` | A string as the prefix for each storage key. |
## API
### stored
```
stored(key, {
type: JSON,
default: null,
session: false,
})
```
Creates a reference to a stored item.
| argument | description |
| ---: | :--- |
| `key` | A string as the key. Can also be a getter function or a `ref`. |
| `type` | An object with the `parse` and `stringify` functions to manage how the data is stored. Use `Boolean`, `Number` or `String` for a predefined functionality. |
| `default` | Anything as the default value that is returned if the key does not exist. Can also be a getter function or a `ref`. |
| `session` | If `true`, the session storage is used instead of the local storage. Can also be a getter function or a `ref`. |
Returns the created reference.
---
```javascript
let key = 'myAwesomeApp/numbers';
let r = stored(key, {
type: {
parse: (string => string.split('|').map(Number)),
stringify: (array => array.join('|')),
},
default: [],
});
r.value = [1, 2];
console.log(r.value); // => [1, 2]
console.log(localStorage.getItem(key)); // => '1|2'
r.value = null;
console.log(r.value); // => []
console.log(localStorage.getItem(key)); // => null
```
### localStorage
The reactive local storage.
Uses the same API as [`window.localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage).
```javascript
let key = 'myAwesomeApp/backgroundColor';
let backgroundColor = localStorage.getItem(key);
localStorage.removeItem(key);
```
### sessionStorage
The reactive session storage.
Uses the same API as [`window.sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage).