Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mazipan/nuxt-storage
🛢 Utilities for easy read and write browser's storage in Nuxt.js project
https://github.com/mazipan/nuxt-storage
browser-storage localstorage nuxt nuxt-storage sessionstorage
Last synced: about 1 month ago
JSON representation
🛢 Utilities for easy read and write browser's storage in Nuxt.js project
- Host: GitHub
- URL: https://github.com/mazipan/nuxt-storage
- Owner: mazipan
- License: mit
- Archived: true
- Created: 2018-09-25T15:23:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-24T11:49:58.000Z (over 3 years ago)
- Last Synced: 2024-10-28T14:23:10.580Z (about 2 months ago)
- Topics: browser-storage, localstorage, nuxt, nuxt-storage, sessionstorage
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 126
- Watchers: 2
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- oss - Nuxt Storage - Utilities for easy read and write browser's storage in Nuxt.js project - Nuxt, Browser Storage (Open Source Project / Utility)
README
# 🛢 Nuxt-Storage
[](#contributors)
[](https://www.npmjs.com/package/nuxt-storage)
[](https://www.npmjs.com/package/nuxt-storage) [](https://travis-ci.org/mazipan/nuxt-storage)
[](https://codecov.io/gh/mazipan/nuxt-storage) 
> Utilities for easy read and write browser's storage in Nuxt.js project
## Why I need this package?
In Nuxt, it's hard to play with browser's storage like `sessionStorage` and `localStorage`.
This package will help you handle client side storage with a simple API and with various useful additional features such as expiry.
## How to install and use
Install using NPM or Yarn
```bash
# NPM
$ npm i nuxt-storage
# Yarn
$ yarn add nuxt-storage
```
## Sample using this package
##### Set data
```js
import nuxtStorage from 'nuxt-storage';
nuxtStorage.localStorage.setData('key', 'value');
nuxtStorage.sessionStorage.setData('key', 'value');
//Set data with expiry time
// default time is 5 minutes, set it to 15
nuxtStorage.localStorage.setData('key', 'value', 15);
// default time unit is minutes , set it to hours, so type 'h'
nuxtStorage.localStorage.setData('key', 'value', 1, 'h');
```
##### Get data by value
```js
nuxtStorage.localStorage.getData('key');
nuxtStorage.sessionStorage.getData('key');
```
##### Remove or clear storage (localStorage/sessionStorage)
```js
// Remove single item by **key**
nuxtStorage.localStorage.removeItem('key');
nuxtStorage.sessionStorage.removeItem('key');
// Clear entire storage
nuxtStorage.localStorage.clear());
nuxtStorage.sessionStorage.clear();
```
## API options
| Method Name | Parameter | Default Value | Available Options |
|-------------|-----------------------------------|---------------|-------------------|
| getData | `key` (type: String) | Empty String | |
| setData | `key` (type: String) | Empty String | |
| | `value` (type: any) | Empty String | |
| | `expiry` (type: Number) | 5 | |
| | `expiryUnit` (type: String) | m | `s` = second, `m` = minutes, `h` = hour, `d` = day |
| removeItem | `key` (type: String) | | |
| clear | - | | | |
## Support me
- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)
- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)
- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)
- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)
-----
Copyright © 2018 by Irfan Maulana
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
notjiam
⚠️ 🐛
Irfan Maulana
🐛 🚧 ⚠️ 💻
Jakub Zomerfeld
📝
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!